Search code examples
reactjstypescriptreact-proptypes

PropTypes in a TypeScript React Application


Does using React.PropTypes make sense in a TypeScript React Application or is this just a case of "belt and suspenders"?

Since the component class is declared with a Props type parameter:

interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

is there any real benefit to adding

static propTypes {
    myProp: React.PropTypes.string
}

to the class definition?


Solution

  • There's usually not much value to maintaining both your component props as TypeScript types and React.PropTypes at the same time.

    Here are some cases where it is useful to do so:

    • Publishing a package such as a component library that will be used by plain JavaScript.
    • Accepting and passing along external input such as results from an API call.
    • Using data from a library that may not have adequate or accurate typings, if any.

    So, usually it's a question of how much you can trust your compile time validation.

    Newer versions of TypeScript can now infer types based on your React.PropTypes (PropTypes.InferProps), but the resulting types can be difficult to use or refer to elsewhere in your code.