DEV Community

Notes on TypeScript: Inferring React PropTypes

A. Sharif on March 10, 2019

Introduction These notes should help in better understanding TypeScript and might be helpful when needing to lookup up how to leverage T...

Read full post

Sergei • Jun 18 '19

Thanks for the article. I've tried this solution, but stuck with an error:

Type 'string | null | undefined' is not assignable to type 'string | undefined'

<div className={className}
                  ~~~~~~~~~

  node_modules/@types/react/index.d.ts:1645:9
    1645         className?: string;

I'm using React class component declaration and @types/react

const defaultProps = {
    className: 'user'
};
const propTypes = {
    className: PropTypes.string,
};

class User extends React.Component<UserProps> {
    static defaultProps = defaultProps;
    static propTypes: {};

    render() {
        let {className} = this.props;
        return (
            <div className={className}>test</div>
        );
    }
}
User.propTypes = propTypes;

Without declaring className on propTypes it fails with an error Property 'className' does not exist on type'Readonly<InferPropTypes<{...`

What could be the reason for this?

A. Sharif • Jun 20 '19

Thanks for the question. Could you build a codesandbox example, so we can see the complete example and then try to fix it from there?

Sergei • Jun 21 '19

Sure, here it is codesandbox.io/s/weathered-snowfla...
Looks like If disable strict mode in tsconfig.json it works fine.

A. Sharif • Jun 24 '19

Excellent, thanks!
Will try it out and provide some feedback.

Stefano Magni • Jul 15 '19

Thank you for your amazing article!! 👏
One question: how do you manage callback props? The solution above does not help with them because the proptypes does not allow to manage them effectively. For example, I could have this ComponentProps type in my component

export interface ComponentProps {
  handleCheckboxChange: (id: string, checked: boolean) => void;
}

how could I update the InferPropTypes type to be prompted by TS if I pass a callback with a wrong signature?
Thank you so much

A. Sharif • Jul 24 '19

Thanks for the kind words!
I will have a closer look tomorrow and try to provide more insights if possible.

Adham El Banhawy • Mar 11 '19

That's really interesting. I didn't know you can still use propTypes with TypeScript, I just always assumed that you gotta always write interfaces for props.

A. Sharif • Jan 29 '20

If you add the defaultProps definition to the Text component, it should probably be enough for TypeScript to figure out that the property is optional.

Text.defaultProps = {
  size: 5
};

A. Sharif • Jan 29 '20

This is interesting. Can you take a look at the simplified example:
codesandbox.io/s/fancy-bird-vqd9x

If you remove defaultProps TypeScript will complain.

A. Sharif • Jan 29 '20

I think the problem in this specific case is tied to using forwardRef. Will try to find out in more detail , but I think forwardRef drops any default props.

A. Sharif • Jan 29 '20

Yes, I think the problem is within forwardRef in this case. It drops the defaultProps.

A. Sharif • Jan 29 '20

Excellent, thanks! Will have a look at this and try to figure out how we can solve this.

Kit Randel • Jun 26 '20

Thanks for the excellent post. How do you manage typing spread props?

A. Sharif • Aug 24 '20

Sorry, haven't been checking any comments for some time now. Will look into this and add more information.

Derek Morrison • Jul 3 '23

I'm confused. In the first example, the (optional) active prop is of type PropTypes.Requireable<boolean>.

Doesn't that mean it's required? What does "requireable" mean?

Derek Morrison • Jul 3 '23

Ohhhhh - nevermind. That Requireable interface has a method on it called isRequired. So, it's for things can possibly can be made required. 👍

A. Sharif • Feb 11 '20

Thanks for the clarification!