JavaScript to Typescript Conversion: 4 Simple Steps

TypeScript (TS) is an object-oriented, open-source programming language and an extension of Javascript (JS), making TS its superset.

Here, we shall explain how to convert an existing JS code to TS. This is slightly challenging to do as errors can pop up along the way. But fret not! It is not impossible.

Your JavaScript code will run as .js files, usually saved in your src, lib and dist directories. This file will be used as an input for TypeScript, and you will be running the outputs that will be executed. It is crucial to ensure that the files are separated to avoid overwriting in TS. Output files should be in the output directory. Along with this, you can do bundling or use Babel.

Steps to convert Javascript to Typescript

Here are steps to follow for converting your JS code to TS:

Step 1:

You need to add the tsconfig.json file. It can be found in src and even in tests. It looks after which files to include, exclude and what kind of checking will be performed. Let’s create:

The explanation of the above code is:

1. Read in any files it understands in the src directory, with the help of include.
2. Take JavaScript files as inputs by using allowJs.
3. Remove all of the output files in built with outDir.
4. Translate newer JavaScript constructs down to an older version like ECMAScript 5 by using target.

Step 2:

Now, you need to integrate with a build tool. Most JavaScript projects have a build tool. Some build tools are:

• Webpack
• Gulp

We will use webpack in this project. Run the following command on your terminal:

npm install ts-loader source-map-loader

Here, ts-loader means TypeScript loader, and it is being used with source-map-loader so that debugging becomes easy.

And now, merge it to webpack.config.js:

module.exports = {

entry: “./src/index.ts”,

output: {

filename: “./dist/bundle.js”,

},

// Enable sourcemaps for debugging webpack’s output.

devtool: “source-map”,

resolve: {

// Add ‘.ts’ and ‘.tsx’ as resolvable extensions.

extensions: [“”, “.webpack.js”, “.web.js”, “.ts”, “.tsx”, “.js”],

},

module: {

rules: [

// All files with a ‘.ts’ or ‘.tsx’ extension will be handled by ‘ts-loader’.

{ test: /\.tsx?$/, loader: “ts-loader” },

// All output ‘.js’ files will have any sourcemaps re-processed by ‘source-map-loader’.

{ test: /\.js$/, loader: “source-map-loader” },

],

},

};

Step 3:

Change the extension from .js to .ts. Similarly, change .jsx to .tsx. You might come across some errors.

Some errors are listed here:

• Too many arguments.
• “Cannot find name ‘require’ ” and similar while importing the modules.
• Unable to find ‘foo function’ while getting a declaration.

To rectify those, check this.

Step 4:

We can use JavaScript libraries like Lodash and jQuery. TS needs these for compiling the files, and it does so by checking the types of the object.

TypeScript Type definition files for most JavaScript libraries are already available at DefinitelyTyped. All you need to do is install the types for each library used in your project.

For Jquery, install the definition:

npm install @types/jquery

And the process is complete. Following the mentioned steps your conversion from JS to TS will be completed. Happy coding!

Must read: Is Typescript better than Javascript?