diff --git a/packages/component-component/__tests__/__snapshots__/component-component.test.tsx.snap b/packages/component-component/__tests__/__snapshots__/component-component.test.tsx.snap
new file mode 100644
index 000000000..9b5926e9f
--- /dev/null
+++ b/packages/component-component/__tests__/__snapshots__/component-component.test.tsx.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Component /> didMount is not required 1`] = `
+<h1>
+  No need for didMount prop for rendering!
+</h1>
+`;
+
+exports[`<Component /> didUpdate is not required 1`] = `
+<h1>
+  Can render without didUpdate prop!
+</h1>
+`;
+
+exports[`<Component /> getSnapshotBeforeUpdate is not required 1`] = `
+<h1>
+  getSnapshotBeforeUpdate prop is not necessary for render!
+</h1>
+`;
+
+exports[`<Component /> prefers \`render\` over \`children\` 1`] = `
+<div>
+  <h1>
+    Render with an actual "render" prop
+  </h1>
+</div>
+`;
+
+exports[`<Component /> renders with children render prop 1`] = `
+<div>
+  <h1>
+    Using children prop as render prop!
+  </h1>
+  <p>
+    This is a pretty neat pattern. I'm really glad someone thought of it.
+  </p>
+</div>
+`;
+
+exports[`<Component /> renders with normal children 1`] = `
+<div>
+  <h1>
+    Some regular children!
+  </h1>
+  <p>
+    This is another child in the regular children group.
+  </p>
+</div>
+`;
+
+exports[`<Component /> renders without children 1`] = `null`;
+
+exports[`<Component /> renders without figuritively exploding 1`] = `
+<div>
+  Heyyyooooo
+</div>
+`;
+
+exports[`<Component /> shouldUpdate is not required 1`] = `
+<h1>
+  Can render without shouldUpdate prop.
+</h1>
+`;
+
+exports[`<Component /> state calls getInitialState 1`] = `
+<div>
+  <h1>
+    Jane Fonda
+  </h1>
+  <h2>
+    Favorites
+  </h2>
+  <ol>
+    <li>
+      Color: 
+      green
+    </li>
+    <li>
+      Food: 
+      calzones
+    </li>
+  </ol>
+</div>
+`;
+
+exports[`<Component /> state receives initialState 1`] = `
+<div>
+  <h1>
+    Henry Winkler
+  </h1>
+  <h2>
+    Favorites
+  </h2>
+  <ol>
+    <li>
+      Color: 
+      purple
+    </li>
+    <li>
+      Food: 
+      cheeseburgers
+    </li>
+  </ol>
+</div>
+`;
+
+exports[`<Component /> willUnmount is not required 1`] = `
+<h1>
+  Don't need willUnmount prop in order to render!
+</h1>
+`;
diff --git a/packages/component-component/__tests__/component-component.test.js b/packages/component-component/__tests__/component-component.test.tsx
similarity index 97%
rename from packages/component-component/__tests__/component-component.test.js
rename to packages/component-component/__tests__/component-component.test.tsx
index 57089a785..19dbb061e 100644
--- a/packages/component-component/__tests__/component-component.test.js
+++ b/packages/component-component/__tests__/component-component.test.tsx
@@ -10,7 +10,7 @@ const COMPONENT_ARGS = {
   forceUpdate: expect.any(Function),
 };
 
-let snapshot = element => {
+let snapshot = (element: any) => {
   let wrapper = renderer.create(element);
   const tree = wrapper.toJSON();
   expect(tree).toMatchSnapshot();
@@ -73,9 +73,11 @@ describe("<Component /> ref handling", () => {
     };
     const testComponent = renderer.create(<Component refs={MOCK_REFS} />);
     // assert refs match expected on mount
+    // @ts-ignore
     expect(testComponent.getInstance()._refs).toEqual(MOCK_REFS);
     // "update" component and check if refs still match
     testComponent.update(<Component />);
+    // @ts-ignore
     expect(testComponent.getInstance()._refs).toEqual(MOCK_REFS);
   });
 });
@@ -89,7 +91,7 @@ describe("<Component /> state", () => {
           displayName: "Henry Winkler",
         }}
       >
-        {({ state }) => (
+        {({ state }: any) => (
           <div>
             <h1>{state.displayName}</h1>
             <h2>Favorites</h2>
@@ -108,9 +110,9 @@ describe("<Component /> state", () => {
         favoriteColor="green"
         favoriteFood="calzones"
         displayName="Jane Fonda"
-        getInitialState={props => ({ ...props })}
+        getInitialState={(props: any) => ({ ...props })}
       >
-        {({ state }) => (
+        {({ state }: any) => (
           <div>
             <h1>{state.displayName}</h1>
             <h2>Favorites</h2>
@@ -130,7 +132,7 @@ describe("<Component /> state", () => {
     });
     const testComponent = renderer.create(
       <Component initialState={{ goodAtTesting: false }}>
-        {({ setState }) => (
+        {({ setState }: any) => (
           <div>
             <button
               className="test-button"
@@ -146,11 +148,13 @@ describe("<Component /> state", () => {
       className: "test-button",
     });
     // assert state value to match initialState
+    // @ts-ignore
     expect(testComponent.getInstance().state.goodAtTesting).toBe(false);
     // trigger returned setState function using mock click event
     buttonElement.props.onClick();
     expect(setStateFunction).toHaveBeenCalled();
     // assert that state value has been updated
+    // @ts-ignore
     expect(testComponent.getInstance().state.goodAtTesting).toBe(true);
   });
 });
diff --git a/types/index.d.ts b/types/index.d.ts
index b867229b4..a4a76776f 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1 +1,37 @@
 declare const __DEV__: boolean;
+
+declare module "@reach/component-component" {
+  import React from "react";
+  interface ComponentProps<
+    State extends object = {},
+    Refs extends object = {}
+  > {
+    [key: string]: any;
+    initialState?: State;
+    getInitialState?: (props: ComponentProps<State>) => State;
+    refs?: Refs;
+    getRefs?: (...args: any[]) => Refs;
+    didMount?: (...args: any[]) => void;
+    didUpdate?: (...args: any[]) => void;
+    willUnmount?: (...args: any[]) => void;
+    getSnapshotBeforeUpdate?: (...args: any[]) => any;
+    shouldUpdate?: (args: {
+      props: ComponentProps<State>;
+      state: State;
+      nextProps: ComponentProps<State>;
+      nextState: State;
+    }) => boolean;
+    render?: (...args: any[]) => React.ReactElement | null;
+    children?:
+      | ((...args: any[]) => React.ReactElement | null)
+      | React.ReactNode
+      | React.ReactElement
+      | Element
+      | null;
+  }
+  class Component<
+    State extends object = {},
+    Refs extends object = {}
+  > extends React.Component<ComponentProps<State, Refs>, State> {}
+  export default Component;
+}