React Course - TypeScript - Props

[@jamesa.]

Thanks so much for this. I was having some issues and you really helped! I wish more people found this.

[@TechbaseDev]

Really glad the video was helpful to you!

[@Racools]

For some reason I needed to make headerText optional in the Addprops interface. Property 'headerText' is missing in type '{}' but required in type 'AppProps'.

[@TechbaseDev]

You might have a small difference in your code compared to mine. Sometimes restarting the TypeScript server can get rid of some problems.

[@myhanhnguyen5198]

i have have same problem but can't fix it

[@alexanderberglehner2736]

you can do: [key: string]: string

[@luanecarolineaquinocavalca1064]

thank you! very good explanation!

[@mertcankose5079]

Thanks, it's really helped me

[@hoyinli7462]

great video!

[@douarmedouailislam1840]

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'

[@myhanhnguyen5198]

i have same problem as wll :(

[@tadakuniyasuda8214]

Did you guys find the solution for this?

[@alexanderberglehner2736]

you can do: [key: string]: string

[@lanbuitan7208]

thank for your video, why we not use props: Props and not type all property in interface to parameter

[@TechbaseDev]

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.

[@simonjones90]

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.

[@annaiustus9445]

Why did you use Interface instead of Type?

[@TechbaseDev]

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.