We will introduce how to add TypeScript to new and old react projects using simple commands.
Add TypeScript to a React Project
In this tutorial, we’ll go through both scenarios in which we create a new React application or add a TypeScript to a project already built. First, let’s start with the new installation of react application.
There are two ways to install React application using the TypeScript template. One is by using
Using the following command, we can easily install a new React application with the TypeScript template.
# NPX npx create-react-app New-app --template typescript
This command will install a new react application with the latest version. Now, if we want to install the react application using the
yarn, we can run the below command.
# YARN yarn create-react-app New-app --template typescript
First, we need to run the following command to install TypeScript into our project using
npm, as shown below.
# NPM npm install --save typescript @types/node @types/react @types/react-dom @types/jest
If we have installed our project using
yarn, we need to run the command below.
# YARN yarn add typescript @types/node @types/react @types/react-dom @types/jest
.ts. After changing all the files to TypeScript, we will restart our development server.
There will be some errors related to types. We must fix these errors according to the project’s needs before developing new features.