Having spent the last few months developing React applications and libraries using Typescript, I thought I’d share some of the things I’ve learned ...
For further actions, you may consider blocking this person and/or reporting abuse
My bread and butter with React and TypeScript is to type the functional components with the
React.FC
generic type. With your example above, that would be something like this:Why? it adds automatically
children
for you, makes the signature easier to read (IMHO) and checks the return type.Note: FC is a short-hand for FunctionComponent
Cool! I've used FunctionComponent in the past but didn't realize it actually added children for you.
Thanks for the tip!
The React TypeScript cheat sheet recommends doing them using the shorter version of Ben's syntax:
type AppProps = { message: string }; /* could also use interface */
const App = ({ message }: AppProps) => {message};
github.com/typescript-cheatsheets/...
For someone starting out with React (previous experience with Vue), would you say it's worth integrating and learning TypeScript early on, or would it be better having a decent understanding of React before implementing it?
An alternative opinion: if you already are comfortable enough with TypeScript, then I would recommend starting with TypeScript in React because it’s so helpful to be able to use IntelliSense to automatically see the methods available to each part of React. And it’s also really helpful to know which properties are required on each component. I just started using React and I feel incredibly comfortable and productive in it already due to the types.
I'd recommend starting with React and JavaScript and moving onto TypeScript later. Learning typescript can add a certain level of friction to the development experience especially if you don't have prior experience with typed languages. Plus, most of the tutorials and guides you'll find will be written in regular Javascript.
Probably best to just focus on learning React - and then move over to typescript once you feel you've got the basics down.
Cool, thanks for the reply Ben! I'll definitely keep this article bookmarked for when I do start using TypeScript :)
Hello, Ben
Thx for the knowledge sharing. Im just about to move my internal React project to React+TS, but have faced with problem. Maybe you can help me with this?
Here is a links to code.
gist.github.com/yazonnile/a2268d77...
or
codesandbox.io/s/2ptse
question is - how describe an interface and not get an error? (make method optional will work, but its more like a hack :)
Hrmm yeah, using cloneElement with typescript is really messy. I honestly don't have a great solution to this. If I'm forced to use cloneElement I tend to make the cloned values optional, and then throw an error if they aren't actually passed to the child.
Lately I've been preferring to use
React.createContext
andReact.useContext
where possible instead, since this gets around the typing issues.If you do find a better way of typing using cloneElement, let me know!
Hi, good article, thanks!
Please add format of code snippets
three tick mark plus keyword 'jsx'
Thanks! I guess they got stripped when I imported the post from my blog. It's updated and looking better.
Hey there, fantastic article, really helpful!
One thing - I did have problems getting the reducer example to work.
Do you have a quick sample you can share?
Its cool! I love React+TS! Its really smart