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.
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.
npx we can be sure that we always use the latest version of Create React App.
Let's take a look at differences between a project created by Create React App by default and the one with TypeScript support.
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.
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
Do not remove the
react-app-env.d.ts file to avoid errors.
src folder will have TypeScript extensions. We'll have
.ts extension instead of
.tsx instead of
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.
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
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.
Create React App allows to quickly start a new React project with TypeScript support. The process is straightforward and does not require additional configuration.
Here are additional resources that will give you more information about Create React App and TypeScript:
Here is how to change eslint settings in your Create React App project.
How to change tsconfig.json settings.
Create React App documentation.