How to use typescript jsdoc annotations for React PropTypes

Question

When defining react components using typescript we can write something like:

class SomeComponent extends React.Component {
         


        

Answer 1

This works, though it may not be so good.

// Foo.jsx
import * as React from 'react';

/**
 * @type {{ new(props: any): {
     props: { a: string, b: number },
     state: any,
     context: any,
     refs: any,
     render: any,
     setState: any,
     forceUpdate: any
   } }}
 */
const Foo = class Foo extends React.Component {
  render() {
    return 
{this.props.b}
;
  }
};
export default Foo;

// import Foo and use it in .tsx or .jsx file
import Foo from './Foo';

; // error: Type '{}' is not assignable to type '{ a: string; b: number; }'
; // OK