loading...

Discussion on: Notes on TypeScript: Inferring React PropTypes

Collapse
busypeoples profile image
A. Sharif Author

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

Collapse
eriksjaastad profile image
Erik Sjaastad

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

Thread Thread
busypeoples profile image
A. Sharif Author

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
};
Thread Thread
eriksjaastad profile image
Erik Sjaastad

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

Thread Thread
busypeoples profile image
A. Sharif Author

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.

Thread Thread
busypeoples profile image
A. Sharif Author

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.

Thread Thread
eriksjaastad profile image
Erik Sjaastad

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-...

Thread Thread
busypeoples profile image
A. Sharif Author

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

Thread Thread
eriksjaastad profile image
Erik Sjaastad

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!

Thread Thread
eriksjaastad profile image
Erik Sjaastad

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

Thread Thread
busypeoples profile image
A. Sharif Author

Thanks for the clarification!