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
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
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
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.
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-...
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!
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
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 setExcellent, thanks! Will have a look at this and try to figure out how we can solve this.
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
If you add the
defaultProps
definition to theText
component, it should probably be enough for TypeScript to figure out that the property is optional.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
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.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.Hrm. Removing
isRequired
and the defaultProps removes the TS error also. Even adding inReact.FC<Props>
it still works withoutisRequired
. I think I've narrowed it down to incorporatingforwardRef
, 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-...Yes, I think the problem is within
forwardRef
in this case. It drops thedefaultProps
.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!
It turns out that
forwardRef
was just another one of the issues. If you add a method to thename
prop likename.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
Thanks for the clarification!