title: How do I create a TypeScript type definition for a stateless React component?
body: <p>I'm trying create type definitions for an existing suite of <em>stateless</em> React components, so I can generate documentation automagically and to improve intellisense in my team's tooling.</p>
  
  <p>An example component could look like this:</p>
  
  <p><strong>myComponent.js</strong></p>
  
  <pre><code>import React from 'react';
  
  export const MyComponent = ({ prop1, prop2, prop3 }) =&gt; (
      &lt;div&gt;
          { prop1 ? prop2 : prop3 }
      &lt;/div&gt;
  );
  </code></pre>
  
  <p>I would like my type definition to:</p>
  
  <ul>
  <li>Define which props are allowed (and which are required)</li>
  <li>That it will return JSX</li>
  </ul>
  
  <p>Looking at <a href="https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011" rel="noreferrer">this</a> example of creating React components using TypeScript, I discovered the type: <code>React.SFC</code>.</p>
  
  <p>I tried to use this in my definition:</p>
  
  <p><strong>index.d.ts</strong></p>
  
  <pre><code>declare module "MyComponent" {
      import React from 'react';
  
      interface MyComponentProps {
          prop1: boolean;
          prop2?: string;
          prop3?: string;
      }
  
      export const MyComponent = React.SFC&lt;MyComponentProps&gt;
  }
  </code></pre>
  
  <p>But I'm getting the linting error <code>[ts] '(' expected.</code></p>
  
  <p>I'm pretty new to TypeScript and I am clearly missing something, but I can't find any articles on creating type definitions for stateless components. </p>
  
  <p><strong>EDIT</strong>
  To be clear, I don't want to rewrite my components in TypeScript. I want to create a type definition file (*.d.ts) for an existing ES6 stateless component. </p>