Thread by @benmvp

If you're getting started with React in TypeScript one of the first things you'll wanna do is migrate from runtime prop-types over to static TS types

Typing a function component is the same as any function in TS

Typically props are typed with a TS `interface`

/thread 🧵👇🏾

The primitive prop types map over to their TS equivalents...

🧵👇🏾

Special types like React nodes, enums, class instances, and others...

🧵👇🏾

Arrays and objects...

(the equivalent of a TS object definition is closer to PropTypes.exact() but in general folks have used PropTypes.shape() for that purpose)

🧵👇🏾

Function types are probably my favorite because we are forced to define what the expected arguments and return values are for our function props

No more guesswork when using a component 🙌🏾

🧵👇🏾

I take that back 🙃

My favorite part is that TS types are *required by default*. No more forgetting to add `.isRequired` and using a prop w/o checking its existence

We can still mark a prop optional in TS with `?`

🧵👇🏾

There's way more prop typing sophistication that TS unlocks, but that's the intro guide to React props in TypeScript 😅

If you want it all packaged up in a shareable post, I've got that covered too! 🎁

benmvp.com/blog/react-pro…