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

Erik Sjaastad • Jan 29 '20

Hey :)
I can shrink this down but I already had this up. codesandbox.io/s/proptypes-ts-debu...

This is using the destructured props, I did try not making it required and using propName! when using it. That seems to work but it seems like TS is still missing the part about the default being set

A. Sharif • Jan 29 '20

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

Erik Sjaastad • Jan 29 '20

It has been really confusing and since most of the components are written this way, I run into the same issue over and over. Thank god you took the time to write everything else! I come back to Notes on TypeScript over and over again <3

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
};

Erik Sjaastad • Jan 29 '20

That should be the same as adding the value to the destructured props. I updated Text.tsx, the component is being implemented in App.tsx and the same error comes up Property 'size' is missing in type '{ children: string; }' but required in type

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.

Erik Sjaastad • Jan 29 '20

Hrm. Removing isRequired and the defaultProps removes the TS error also. Even adding in React.FC<Props> it still works without isRequired. I think I've narrowed it down to incorporating forwardRef, as soon as that is added it seems to lose it's connection to the given prop value and default props codesandbox.io/s/nostalgic-pascal-...

A. Sharif • Jan 29 '20

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

Erik Sjaastad • Jan 29 '20

You have no idea how long I've been ignoring narrowing down THAT problem! I've been looking at everything else except that. And finding that out, just lead me to this :D github.com/facebook/flow/issues/74...
Thank you soooo much! You've been a life saver!

Erik Sjaastad • Jan 30 '20

It turns out that forwardRef was just another one of the issues. If you add a method to the name prop like name.toUpperCase() TS will argue that the value can be null even when you give it the default value and it doesn't complain when implementing <DisplayName />. This describes the issue in stateless functions with defaultProps. It doesn't look like this has really been solved. github.com/microsoft/TypeScript/is...
Hotell's solution does work thought codesandbox.io/s/fast-pond-lhno0

A. Sharif • Feb 11 '20

Thanks for the clarification!

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.

Erik Sjaastad • Jan 21 '20

Was this solved? This is one of the few articles using InferProps and thank you so much for writing it!

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.