BradCypert.com
How do I use TypeScript with React?
January 11, 2020

How do I use TypeScript with React?

Posted on January 11, 2020  (Last modified on November 9, 2022 )
2 minutes  • 320 words

React is allowing developers to iterate faster and build safer, more reliable frontend applications than we were building many years ago. TypeScript , a relatively new addition to the “JavaScript Alternatives” scene, also aims to add a new level of safety in the form of type safety. Naturally, it makes sense for us to want to use TypeScript to write React components.

But how do you do that? There are two different ways.

Using the –typescript flag with create-react-app

If you’re starting a new React project, the easiest way to enable typescript is via a flag to create-react-app when starting your new react project. If you’re not starting your react project with create-react-app (you probably should !) then this section won’t apply to you.

create-react-app ships with a number of flags that can be listed by running create-react-app --help in your terminal. The one we want to use is the --typescript flag, and we can use it like so:

create-react-app frontend --typescript

This creates a new React app in our current directory named “frontend” and initializes it with typescript support. You can now open this in your editor and where you would see .js files, you’ll now see .ts files. Your build pipeline is already configured, so you’re good to start coding right away!

Without create-react-app

It gets more difficult to give concrete advice at this point, but you’ll essentially need to compile from typescript to javascript and plug that into the rest of your build chain. For webpack , this is as simple as adding a new loader (like awesome-typescript-loader ) to your webpack config and changing our source files to be TypeScript files instead of JavaScript. In fact, an even better idea is to install create-react-app, run the above command, and immediately npm run eject. This will eject a webpack config already configured for use with TypeScript. Then you can copy the relevant pieces into your own config.

Cartoon headshot of Brad Cypert
Follow me

Connect with me to follow along on my journey in my career, open source, and mentorship. Occasionally, I'll share good advice and content (quality not guaranteed).