Migrating from JavaScript to TypeScript

---

---

TypeScript is a superset of JavaScript and provides more features than JavaScript. The main purpose of using TypeScript in any project instead of JavaScript is to achieve type safety as TypeScript allows defining types for each variable, function parameters, function return type, etc.

Furthermore, TypeScript also has features like static typing and supports classes, interfaces, modules, and other high-level features that are not supported by JavaScript. Here, you will learn to migrate your JavaScript code to TypeScript.

Why Migrate from JavaScript to TypeScript?

Here are a few reasons why anyone should use TypeScript over JavaScript:

• Type Safety: TypeScript’s core feature is its ability to perform static type checking.

• Improved Code Quality: TypeScript can catch errors early in the development process, which can save costs and time in software development.

• Advanced features: TypeScript supports advanced features like interfaces, etc. which are not supported by JavaScript.

• Scalability: Easier to manage and scale large codebases with TypeScript.

Steps to Migrate from JavaScript to TypeScript

You can follow the below steps to migrate your JavaScript code to TypeScript:

Pre-requisite

• You should have a JavaScript file containing the JavaScript code.

Step 1: Setting Up Your Environment

If you haven’t installed TypeScript, you can execute the below command in the terminal to install TypeScript:

npm install -g typescript

Step 2: Add tsconfig.json File in the Project

The main part of converting the JavaScript project into the TypeScript project is adding the tsconfig.json file in the root directory of the project.

The tsconfig.json file contains a single JSON object containing various properties. It defines the configuration to compile the TypeScript code into plain JavaScript code.

You can create a new tsconfig.json file and add the below code to that:

 {
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs",
    }
    "include": [
        "src/**/*"
    ],
}

However, you can also remove some properties or add them in the tsconfig.json file according to your requirements.

Step 3: Convert JavaScript Files to TypeScript

Now you are ready to use TypeScript files. TypeScript compiler compiles only TypeScript files (.ts and .tsx). Rename one of the .js files to .ts. If your file includes JSX, then rename it to .tsx. After renaming the file, you may notice that TypeScript files may contain some type errors. To handle type errors, we perform type annotations.

Add Type Annotations

After renaming the JavaScript files to TypeScript, we start adding type annotations to variables, function parameters, and return types. This will help the TypeScript compiler catch potential errors. Let’s take an example.

Suppose, we have the below code in the JavaScript file:

function add(a, b) {
  return a + b;
}

The above code contains the add() function which takes two variables ‘a’ and ‘b’ as parameters and returns the sum of them.

To convert the above code to TypeScript, you need to add types for the function parameters and specify the return type for the function.

function add(a: number, b: number): number {
  return a + b;
}

Here, we have used the number type for both parameters and the return type of the function.

Step 4: Solve Errors and Install External Libraries

After converting the JavaScript code into TypeScript, make sure to solve any errors given in the code editor. Otherwise, you will also get an error while compiling the TypeScript code into plain JavaScript code.

If you are using external libraries in the JavaScript project, you can use the Node Package Manager (NPM) to install the libraries in the TypeScript project. If you don’t install these external libraries, the compiler will throw an error.

Step 5: Compile the TypeScript Code

After solving the errors, execute the below command in the terminal to compile the TypeScript code:

npx tsc filename

In the above command, you can replace filename with the actual name of the TypeScript file.

After executing the command, it will generate a JavaScript file with the same name as the TypeScript file. This JavaScript file can be used like a normal JavaScript file with HTML or executed using NodeJS.

This lesson has explained the basic steps to convert your JavaScript project into TypeScript. However, with the help of these steps, you can also convert a complex JavaScript project into TypeScript.