How to Start New React Application with Create React App and TypeScript

In this article you'll learn how to start a new React application with the Create React App that also supports TypeScript. We will look at the initial configuration of an application, and how to start adding new React components using TypeScript.

For this article, we assume that you have got the basic knowledge about TypeScript and know about the Create React App tool.

We recommend checking the TypeScript in 5 minutes and Getting Started with Create React App articles if you are not familiar with TypeScript and Create React App.

To create a new React project with TypeScript support all we need is to run the following command:

We provide the --template typescript parameter to specify that we need TypeScript support. Running this command will create a new React project.

With previous versions of Create React App additional configuration was required to add TypeScript to a project. Now we get a ready to run project with TypeScript support with a single command.

To start a new React project don't install npm. Use the npx tool instead. It allows using npm packages without installing them first.

When using npx we can be sure that we always use the latest version of Create React App.

Overview of Generated Project

Let's take a look at differences between a project created by Create React App by default and the one with TypeScript support.

TypeScript configuration file

The first thing you may notice is the tsconfig.json file at the root of a project. This file specifies settings that will be used by TypeScript when compiling our code. We can modify settings in this file if needed.

Create React App types declaration file

Next, there is a new react-app-env.d.ts file in the src folder. This file references TypeScript types declarations that are specific to projects started with Create React App.

These type declarations add support for importing resource files such as bmp, gif, jpeg, jpg, png, webp, and svg. That means that the following import will work as expected without errors:

It also adds support for importing CSS Modules. This relates to import of files with .module.css,.module.scss, and .module.sass extensions.

Do not remove the react-app-env.d.ts file to avoid errors.

Source code

All JavaScript code files in the src folder will have TypeScript extensions. We'll have .ts extension instead of .js and .tsx instead of .jsx.

Other features

Apart from the changes mentioned above, everything will work in the same way. You can use all the features of projects created with the Create React App. This includes eslint support, running tests, and development server with hot reload.

Even the eject action will work allowing you to extract the configuration of the project if needed.

Adding Components

After a project creation, we can start adding components to our application. Thanks to TypeScript support we can also declare types for our components.

Here's an example of a functional component:

We've specified the React.FC<IMyComponentProps> as a type for MyComponent. The React.FC type specifies that our function should return a React component or null. The interface specified as a generic parameter means that our component requires properties specified in the IMyComponentProps interface, which is message in our case.

Here is an introduction to TypeScript generics if you'd like to learn more about them.

This allows TypeScript to check the returned value of our component function and also control the properties that we provide in code.

In a similar way, we can add a class component:

For the class component, we declare a class MyComponent. We derive it from the React.Component class that provides base functionality of a React's class component. The IMyContentProps interface allows to control properties, and the IMyComponentState interface controls the values we can put in the state.

Conclusion

Create React App allows to quickly start a new React project with TypeScript support. The process is straightforward and does not require additional configuration.

More Resources

Here are additional resources that will give you more information about Create React App and TypeScript: