Convert JavaScript to TypeScript

JavaScript vs. TypeScript

Simply we can say that typescript is javascript just with some additional features. We can anytime convert our code from javascript to typescript using the .js, and .ts extensions.

Now with proper steps let us see how we can convert the javascript code to typescript:

How to Convert JavaScript to TypeScript?

The first step will be to install the TypeScript compiler and the loader.

Install TypeScript Compiler and Loader

We can install the typescript compiler by writing the following line in our compiler:

Then we have to add the tsconfig.json file to the project

Add the "tsconfig.json" File to the Project

We will have to add a tsconfig.json file to our project, which will manage the project's compilation options as well as which files are to be included and excluded.

In the above code, the outer direct specifies that the output files should be redirected to a folder called "junk". The allow js option specifies that all JS files should be allowed. The convert option specifies that all JavaScript constructs should be translated to ECMAScript. Then in the next step we need to integrate this with the help of a build tool:

Integrate with the Help of a Build Tool

As we know we need to use the webpack as most of the JavaScript projects use it. A Webpack is used to handle the process of all the .ts, and .tsx files.

Let us see with the help of a code how to add two loaders in typescript:

Now we Need to Change All the "ts" Files to "js" Files

In this process, we need to change all the js files to ts by renaming the file name from .js to .ts and renaming all the jsx files from .jsx to .tsx . If we do this then our code might give some errors, for that, we need to check those errors.

Checking for Errors

Let us see a few more examples where the converted javascript will show an error in typescript:

In the above code in typescript, it will show an error because in typescript the id and name will not belong to type {}. To rectify this we have to rewrite it as follows:

We will simply push/move all the properties inside the object while writing the code in typescript. Run the above code in your editor for a better and clearer explanation.

Troubleshooting

The following process is very easy to perform but still, if u face any problem while performing any of these processes that is required then you may refer to this article or you may also refer to the following article links mentioned below:

• Migrating from JavaScript
• Typescript

You may also refer to the above links if any problem or trouble is faced while doing the above process.

TypeScript Best Practices

As we know the typescript is a typed language and here the data types of all the languages are written explicitly.

• We should avoid using any object data types as they avoid most of the errors in the code.
• We should make our custom interfaces as detailed as possible and use nesting.
• We should avoid the use of any unknown types in typescript.
• We should use access modifiers in typescript.
• In typescript, the function overloads should be consecutive. Using nesting at the interface level, helps us to make the application type-safe by keeping a modular architecture too.