Getting started with TypeScript + React

Starting a project in React with create-react-app may be the easiest way to start a new project, but what if you want to use TypeScript instead of JavaScript?

Don’t worry, we will go through this step by step and it will become easy to apply this to your own project by the end of this article.

Starting a new React project

The first step is to create a new React project, which you can do by using the create-react-app approach. Run the following command:

npx create-react-app <project-name>

How to configure your React app to use TypeScript instead of JavaScript

First, let's install TypeScript in our project by running the following commands:

NPM

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Yarn

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Change the file extensions to TypeScript

In order to write TypeScript code in a React project, rename the files with .js or .jsx into .tsx.

This will now add TypeScript typing to your previously React code.

Create the tsconfig.json file

In order to compile TypeScript, you will need a tsconfig.json file. This JSON format file contains the compiler options for TypeScript.

{
    "include": [
        "src/*"
    ],
    "compilerOptions": {
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    }
}

Alternative from the command line

You can also generate the file using the following command, but first lets make sure that you have TypeScript installed globally:

tsc -v

If not, run the following commands.

NPM

npm install -g typescript 

Yarn

yarn global add typescript

Then, run the following command to generate the tsconfig.json file.

NPM

tsc --init

Yarn

yarn tsc --init

After finishing generating the tsconfig.json file using the above tsc commands, make sure you have it on the root folder of the project and that it looks something like the following:

🎉 Now you should be good to go and create your first TypeScript React component.

Creating your first TypeScript React component

Now that TS is correctly set up and working, it's time to create your first .tsx component.

🪚 First, let's create the component.

MyButton.tsx

Import MyButton.tsx to App.tsx

TypeScript-React typing

One of the main TypeScript funcionality that can be used in React components is the typing of props, which are basically the "properties" of your component.

Interface props

In order to define props with TypeScript in React, you can define using an interface.

interface MyButtonProps {
   emoji: string
}

Now, use the props inside the MyButton.tsx component:

Now the component contains the props defined inside the MyButtonProps interface.

Typing and debugging

Now that you have created the props and added a type for emoji, unless you add that prop (emoji) to the component, TypeScript will throw you an error such as the following and will not render the UI unless you fix it:

This tells you that you are missing that type prop on the component. Add it in order to get rid of this error:

After adding the missing emoji type prop, when you click on the button, it should display an alert like this with the string passed in the MyButton prop.

🎉 Congrats! You have just created your first TypeScript + React component!

📚 Further reading

For further reading on these two frontend tools, the following documentation will be useful:

• React: https://reactjs.org/docs/getting-started.html
• create-react-app: https://create-react-app.dev/
• create-react-app + TypeScript: https://create-react-app.dev/docs/adding-typescript/
• TypeScript: https://create-react-app.dev/docs/adding-typescript/

👋 Thank you for reading!

Now that you have learned the basics of how to get started with TypeScript in React projects, you can take these learnings and apply to your projects, allowing you to build more complex and maintainable React code. I will see you on my next article!

Comments

[Rense Bakker]

Whats wrong with the already provided typescript template from CRA?
npx create-react-app my-app --template typescript

[Bruno]

There is nothing wrong with the already provided template for create-react-app TypeScript 😉 it works absolutely fine. The point with this approach is also for the case that we would go about adding TS to an already existing existing React project. Thank you for pointing out this aspect!🙂

[Rense Bakker]

Ah yes then it makes more sense! Thanks for the clarification 👍 Make sure to also check out vite's guide for React + Typescript (vite is really nice and much faster than CRA/webpack).

[Bruno]

Thank you for the suggestion, Rense!🙂I will look into it and share my thoughts in a future article!

[DarkMix842]

I did not understand anything. Please write more clearly.

[Bruno]

I wrote the article as clearly as possible, not only in words but also visually, so I do not understand which part/s you did not understand, as you have not mentioned the points you found unclear… I would appreciate if you would have mentioned them!