Getting started with TypeScript + React
Tags: react, javascript, typescript, tutorial
Published: 2022-12-19 11:04:58

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? 

![puppet thinking](https://i.gifer.com/origin/f5/f5159d95d3c419029c28b136615b4096_w200.gif)

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

![files on vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcisz7zgsjpof6kgzenl.png)

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:

![tsconfig.json file code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15scijb7glpa7wromblg.png)

🎉 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

![MyButton.tsx component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc0400vba07hsq9y4v20.png)

### Import MyButton.tsx to App.tsx

![App.tsx component with MyButton component import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1awni1k6570rfe696fw.png)

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

![MyButton.tsx component with props defined on interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sxp2rguizliecpokpvj.jpeg)

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:

![typescript error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwrwz1a1ktd8vrzyo4wn.png)

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

![react component with type prop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpfrfiyudyku3q7s0kxc.png)

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

![emoji displayed in alert popup after button is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8l0c4moke42jgr5puhh.png)

🎉 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!