Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use typescript jsdoc annotations for React PropTypes

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

class SomeComponent extends React.Component<PropInterface, StateInterface> {
  // ...
}

Is there a way do the equivalent using jsdoc annotations and have props type-checked.

like image 885
lorefnon Avatar asked May 03 '17 19:05

lorefnon


People also ask

Can you use JSDoc with TypeScript?

You can use most JSDoc type syntax and any TypeScript syntax, from the most basic like string to the most advanced, like conditional types.


1 Answers

I prefer following form (es2015 + @types/react):

/**
 * @typedef {object} Props
 * @prop {string} className
 * @prop {number} numberProp
 *
 * @extends {Component<Props>}
 */
export default class SomeComponent extends Component {
    render() {
        return (
            <div className={this.props.className}>
                {this.props.numberProp}
            </div>
        );
    }

}
like image 140
artin Avatar answered Sep 20 '22 08:09

artin