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

In case someone is searching for an alternate solution. Regarding to this Typescript issue you can also achieve it like this.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

/**
 * @augments {Component<{onSubmit:function, text:string}>}
 * @param {object} event - Input event
 * @return {React.ReactElement} - React component
*/
class Test extends Component {
  handleInput = (event) => {
    event.preventDefault();
    this.props.onSubmit(event.target.value);
  };

  render() {
    const { text } = this.props;
    return 
Hello, property :O {text}
;
  }
}

Test.propTypes = {
  onSubmit: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
};

export default Test;