title: Generating PropTypes for React Components written in TypeScript
body: <p>We're creating a library of components for our internal applications. The old version of that library was written in <code>JavaScript</code> and <code>JSX</code>, thus we have declared <code>propTypes</code> for all the components for type-safety.<br>
  The newer version of the component library is written in <code>TypeScript</code>. For type-safety we used interfaces for <code>PropTypes</code> such as the following - </p>
  
  <pre><code>interface Props {
      size?: 'small' | 'large';
      color?: string;
      text?: string;
  }
  export class MyComponent extends React.Component&lt;Props, any&gt; { ... }
  </code></pre>
  
  <p>This was working fine since the newer projects using those components were written in TypeScript too (We do publish <code>d.ts</code> file for all the component classes). Now we needed to update the component library in the old projects too. Since they were not using TypeScript, the type-safety were not working. They're still relying on the old propTypes way for type-safety. </p>
  
  <pre><code>//Usage of MyComponent
  &lt;MyComponent size={20} color={'red'} text={'HelloWorld'} /&gt;
  //Size must be one of 'small' or 'large' not the numeric value.
  </code></pre>
  
  <p>So my question is, what are the ways of handling this issue of using TypeScript (and tsx) written components in a non-TypeScript project?  </p>
  
  <p>There're some ways I've identified -</p>
  
  <ul>
  <li>Using some parser for d.ts file</li>
  <li>Creating a HoC for all the components</li>
  <li>Writing propTypes along with interfaces for all the components manually.</li>
  </ul>
  
  <p>Are there any other cleaner and less manual way?</p>