DEV Community

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 post

Petyo Ivanov • May 28 '19

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

Ben McMahen • May 28 '19

Cool! I've used FunctionComponent in the past but didn't realize it actually added children for you.

Thanks for the tip!

Ben Greenberg 🧢 • Oct 29 '19

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/...

Rick Booth • May 24 '19

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?

Cubicle Buddha • May 25 '19 • Edited

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.

Ben McMahen • May 24 '19

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.

Rick Booth • May 24 '19

Cool, thanks for the reply Ben! I'll definitely keep this article bookmarked for when I do start using TypeScript :)

Slava Z • Jun 15 '19

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 :)

Ben McMahen • Jun 15 '19 • Edited

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!

Sergey S. Volkov • May 24 '19

Hi, good article, thanks!
Please add format of code snippets
three tick mark plus keyword 'jsx'

Ben McMahen • May 25 '19

Thanks! I guess they got stripped when I imported the post from my blog. It's updated and looking better.

George Baptista • Sep 21 '19

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?

Simon • Aug 9 '19

Its cool! I love React+TS! Its really smart