Easiest way to Install TypeScript in your project

TypeScript is a popular programming language that helps programmers write code more easily and with fewer mistakes. It is an open-source language developed by Microsoft, and it has gained a lot of popularity in recent years, especially in the web development community.

In this article we will be learning how to add Typescript in your project. To do that we need follow the following steps :

1. Open your project directory in a terminal or just open the project folder in any code editor and Run the following command in it’s terminal.

cd "your-project-name"

“Make sure to replace “your-project-name” with the actual name of your project.”

2. Run the following command to install TypeScript:

npm install --save-dev typescript

This will install TypeScript as a development dependency of your project, means this command will add “devDependencies” in your package.json, as shown below.

package.json :

3. Once TypeScript is installed, now you need to create a `tsconfig.json` file in the root directory of your project or you can use the following command to create it:

npx tsc --init

This command will create a default `tsconfig.json` file in your project’s root directory.

4. In your src folder, rename App.js or App.jsx file to App.tsx file. This lets TypeScript know that it should compile these files as TypeScript code.

Then Import React from “React” in App.tsx if not Imported yet. Then go to index.js or main.jsx and change the path of “./App” or “./App.jsx” to “./App.tsx” .

5. Now if you are getting the following error in App.tsx :

go to the terminal and click on the Problem section :

now you will see the error on the bottom of the right corner, resolve the error by clicking two times on red cross button.

6. Now, update your package.json file to include a new script that compiles your TypeScript code to JavaScript. Here’s an example script:

package.json :

"scripts": {
  "build": "tsc"
}

Note: Don’t create new “scripts”, just include “tsc” there, as shown below :

for Vite users : package.json

for Create-react-app users : package.json

7. Run this command :

npx tsc

Then restart the Development server and here you are all set to create new Typescript files or change existing “.jsx”, “.js” files to “.tsx” in your project.

SEE ALSO – HOW TO INSTALL BOOTSTRAP IN YOUR REACT PROJECT ?