A Beginners Guide to using Typescript with React

Ben McMahen on May 23, 2019

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 ... [Read Full]
markdown guide
 

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:

export const StandardComponent: React.FC<{ title?: string}> = 
({ children, title = 'Dr.'}) => {
 // rest of the code
}

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!

 

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 and React.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.

 
code of conduct - report abuse