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!