for some reason i can only use optional props if i dont add the ? it says : Property 'headerText' is missing in type '{}' but required in type 'AppProps'
For some reason I needed to make headerText optional in the Addprops interface. Property 'headerText' is missing in type '{}' but required in type 'AppProps'.
I fixed the error '"Property 'headerText' is missing in type '{}' but required in type 'AppProps'" by passing a property to the App component in both App.tsx and App.test.tsx so the code is like in both those files. Otherwise you're breaking the interface you've just defined as it's expecting a param to be passed but you're trying to render the App component without one.
I'm not sure if I understand you correctly, so please correct me if I'm mistaken. It seems that you talk about so called "inline type annotation" (example: www.carlrippon.com/Different-ways-to-strongly-type-function-component-props-with-typescript/#:~:text=Inline,Perhaps). While this is definitely possible, I prefer and recommend a "type alias " (like we use in this video). Especially with a large amount of props "inline type annotation" can make your component look a bit messy. For me consistency is key in codebases and since you can never go wrong with "type aliases" I prefer the latter.
Based on new insights, I would now use types since they are more constrained: react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/#:~:text=consider%20using%20type%20for%20your%20React%20Component%20Props%20and%20State%2C%20for%20consistency%20and%20because%20it%20is%20more%20constrained.
![Getting Started with React Router 6 and Typescript [2022]](/img/1.gif)
Thanks so much for this. I was having some issues and you really helped!
I wish more people found this.
Really glad the video was helpful to you!
for some reason i can only use optional props if i dont add the ? it says :
Property 'headerText' is missing in type '{}' but required in type 'AppProps'
i have same problem as wll :(
Did you guys find the solution for this?
you can do:
[key: string]: string
For some reason I needed to make headerText optional in the Addprops interface.
Property 'headerText' is missing in type '{}' but required in type 'AppProps'.
You might have a small difference in your code compared to mine. Sometimes restarting the TypeScript server can get rid of some problems.
i have have same problem but can't fix it
you can do:
[key: string]: string
I fixed the error '"Property 'headerText' is missing in type '{}' but required in type 'AppProps'" by passing a property to the App component in both App.tsx and App.test.tsx so the code is like in both those files. Otherwise you're breaking the interface you've just defined as it's expecting a param to be passed but you're trying to render the App component without one.
thank for your video, why we not use props: Props and not type all property in interface to parameter
I'm not sure if I understand you correctly, so please correct me if I'm mistaken.
It seems that you talk about so called "inline type annotation" (example: www.carlrippon.com/Different-ways-to-strongly-type-function-component-props-with-typescript/#:~:text=Inline,Perhaps).
While this is definitely possible, I prefer and recommend a "type alias
" (like we use in this video).
Especially with a large amount of props "inline type annotation" can make your component look a bit messy. For me consistency is key in codebases and since you can never go wrong with "type aliases" I prefer the latter.
great video!
Thanks, it's really helped me
thank you! very good explanation!
Why did you use Interface instead of Type?
Based on new insights, I would now use types since they are more constrained: react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/#:~:text=consider%20using%20type%20for%20your%20React%20Component%20Props%20and%20State%2C%20for%20consistency%20and%20because%20it%20is%20more%20constrained.