How to Convert JavaScript to TypeScript? Step-by-Step Guide

Developers often hear about JavaScript vs TypeScript, and everyone has their perspective. Therefore, you should know how to convert JavaScript to TypeScript so that you don’t fall behind everyone. This guide will focus on the steps that will allow you to convert JavaScript to TypeScript.

The steps to convert JavaScript to TypeScript are as follows:

1. Configure Your IDE for TypeScript
2. Add a TypeScript Compiler to Your Project
3. Configure the TypeScript Compiler (tsconfig.json)
4. Convert .js Files to .ts Files
5. Check for and Resolve TypeScript Errors
6. Integrate with Build Tools

This conversion is possible due to JavaScript’s versatility and compatibility, which is why JavaScript is so popular. Moreover, we will discuss these steps in detail so you won’t face any difficulties. Furthermore, we will also examine how to convert the React JavaScript project to TypeScript in the later sections of this guide. Without further ado, let’s get started.  

See Also: How To Remove A Class In JavaScript? Top 3 Methods

Before transforming JS to TS, you should check whether your codebase is prepared for not. It implies whether you have all the compulsory libraries or tools and whether everything is updated to the newest version. Furthermore, check your current JavaScript code and determine the parts you want to transform to TS.

Make sure that your codebase is appropriately formatted. For instance, check whether everything is rightly named, including the variables, functions, and classes. It will allow you to highlight the parts you want to transform into TypeScript, making your job easier. 

Furthermore, while assessing the code, know the TypeScript features so you can refactor your code if needed.     

How to Convert JavaScript to TypeScript? Full Guide

This section will only focus on converting JavaScript to TypeScript in detail. Follow the steps thoroughly, and you won’t face any issues. You can also convert JavaScript to TypeScript online with the help of converters.

Step 1: Configure Your IDE for TypeScript

The first step for converting JS to TS is to ensure that your Integrated Development Environment, like Microsoft VS code, is configured to run with TypeScript. These IDEs will offer features like linting and auto-completion when you work with them. In addition, keep in mind that TypeScript has integrated support for VS Code. Therefore, you should know how to run JavaScript in Visual Studio code to convert it to TypeScript.

Step 2: Add a TypeScript Compiler to Your Project

The second step is to add a TypeScript compiler. You can just run the following command and install it through npm:

npm i typescript

or

yarn add typescript

Step 3: Configure the TypeScript Compiler (tsconfig.json)

The best way to make the configuration file is through the following command:

npx tsc –init

The above code will make a configuration file name “tsconfig.json” when the script ends. This configuration file will contain every compiler configuration with some pre-fixed configuration. Afterward, we have to focus on two properties: 

• “compileOptions”– This is an object through which you use the compiler according to your requirements. For example, you can configure “noImplicitAny” or “strictNullChecks” with the compiler’s help. 

• “Include”- This property contains an array which helps you to mention the filenames or filename patterns that are then searched by the compiler. 

Additionally, there is another property that we should keep in mind. The “exclude” array instructs which files and folders should be ignored.

See Also- What Is Closure In JavaScript? Overview & Examples

 Step 4: Integrate with Build Tools

After adding the “tsconfig.json,” we must integrate it with build tools. In this article, we will work with Webpack. Write this code in your terminal:

npm install awesome-typescript-loader source-map-loader

In the above command, awesome-typescript-loader is a TS loader; however, source-map-loader is utilized for debugging the source code. Afterward, we have to add the module config property in the webpack.config.js file to incorporate the above loaders:

module: { loaders: [ // All files with a ‘.ts’ or ‘.tsx’ extension will be handled by ‘awesome-typescript-loader’. { test: /\.tsx?$/, loader: “awesome-typescript-loader” } ], 

preLoaders: [ // All output ‘.js’ files will have any sourcemaps re-processed by ‘source-map-loader’. { test: /\.js$/, loader: “source-map-loader” } ] }

 Step 5: Convert .js Files to .ts Files

Now, you just have to rename your files with the .ts or .tsx extension at the end of the file. You might get a compilation error in your code when you do this. 

Step 6: Check for and Resolve TypeScript Errors

TypeScript comes with strict type-checking; you may find some issues in your JS Code. You have to check and resolve these errors. Let’s understand via an example. For instance, look at the following code:

let employee = {}; 

employee.code = 15; 

employee.name = “Strobecorp”; 

console.log(employee);

When you run this JS code, you will face a compilation error in TypeScript due to the empty object in the first line. To resolve this, you can contain the properties within the object. For example:

let employee = { 

code: 15, 

name: “Strobecorp” };

How to Convert a React JavaScript Project to TypeScript

Now, we will convert React JavaScript to TypeScript in this guide section, which will help you as a developer. 

Step 1: Add TypeScript to the Project 

The first step to convert JavaScript to TypeScript in React is the same as we did earlier. We have to first install TypeScript by writing the following command in the terminal of the IDE:

npm i typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Afterward, add the “tsconfig.json” with the command: 

npx tsc -init

The above command will only install the packages. The output will be:

Created a new tsconfig.json with:                                       

                                                                     TS 

  target: es2016

  module: commonjs

  strict: true

  esModuleInterop: true

  skipLibCheck: true

  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

Step 2: Update Filenames and Modify Files to Use TypeScript Syntax.

The primary focus of this step is to convert the rest of the files in smaller batches and slowly take on TypeScript.

During the conversion, there will be some packages that won’t work with their type annotations. If the package is used often, then it will probably have a community-maintained which can be installed as a “devDependency” with the following command:

“@types/<package-name>”

If you don’t have any package like that, you have to give your own type annotations by making a “@types” folder in the root of your project and directing your TS compiler to search the folder for types. 

You must remember some things:

• If you are working with JSX, the file name should end with the extension .tsx
• Always monitor your console for issues and resolve them throughout your project.

Step 3: Deal with Third-party JavaScript Libraries

JS uses third-party libraries, for example, jQuery or Lodash. As we have seen in the above step, TypeScript needs to know the types of all these libraries to compile files. Furthermore, we know TS type definition files for JS libraries are already present at DefinitelyTyped. Therefore, we should only install types we have incorporated into our projects. For instance:

$ npm install @types/jquery  

The above command installs the types for jQuery. On the other hand, the following command installs the types for Lodash:

$ npm install -S @types/lodash  

Afterward, you can run the build tool and are all set.

FAQs

Is TypeScript faster than JavaScript?

If we had to compare TypeScript and JavaScript, we would find that JavaScript is quicker, but it is tough to discover the difference most of the time.

Can I use TypeScript with React?

Yes, you can easily use TypeScript with React, a great option developers prefer.

Can TypeScript run in the browser?

TypeScript code is transformed into JS code, which can run anywhere, making it easier for browsers.

What is more popular, JS or TS?

As per the latest reports, TS is more popular, surpassing JS and becoming the second most popular language.

Conclusion

In conclusion, we learned how to convert JavaScript to TypeScript. Follow the steps in this guide, and you won’t face any difficulties. Always change the file name extension to .ts or .tsx when converting to TypeScript. The “tsconfig.json” is one of the most essential aspects and should be added to your project by any means. Furthermore, you can learn how to read a JSON file in JavaScript and how to remove a class in JavaScript to increase your skills as a developer. 

See Also: How To Use A JavaScript Variable In HTML? 5 Best Ways