It’s time to migrate from JavaScript To TypeScript

Published April 03, 2020. 1min read

Team EnLume

A staple in web development, is versatile but prone to bugs due to its dynamic nature. TypeScript, a robust, compiled language, provides a solution with its strong typing and enhanced development tools. Migrating from JavaScript to TypeScript can enhance code quality and reduce common errors. This guide simplifies the migration process, outlining steps and configurations for a seamless transition.

What does JavaScript do?

JavaScript is a programming language commonly used in web development. It is most commonly used as a client-side scripting language and is specifically developed to be a language embedded into a web browser and automate things on the client-side.

What is TypeScript?

TypeScript is a strongly typed, object-oriented, compiled language, Typescript comes with some additional features such as strong-typed variables and object-oriented programming over JavaScript.

Migrating to TypeScript – How it helps

TypeScript is open-source. It modifies JavaScript code, making it simple to read and debug. It also provides highly productive development tools for JavaScript IDEs and practices such as static checking.It helps us avoid critical/functional bugs that developers commonly run into when writing JavaScript by type-checking the code and has many advanced features that help in improving code quality and gets rid of some of the common mistakes easily made in JavaScript.

Let’s get started!

This guide will help you migrate Javascript to Typescript which can be a difficult task.Here are the steps to follow for simple migration:

Add TypeScript dependencies
Add TypeScript configuration file
Updating .js files to .ts/.tsx
Add type definition for packages
Add custom type definition for packages with no declaration
Add interfaces and types where ever required
Strictly typed

Step 1: Integrating TypeScript dependency Tool Install typescript globally

This command will install typescript in your project. Make sure you run it inside your project.

Step 2: Writing a TypeScript configuration file In your project root directory, type the following command to generate tsconfig.json file.

The file contains most of the configuration features which are commented out by default. We are going to edit this file as per our requirement.

outDir – Redirect output structure to the directory, change this to ./build
allowJs – set this to true
target – this converts newer javascript concepts to older ones set this to ES5
Include – this should be your source directory where javascript files are present

The output will look something like the code below

Step 3: Updating from .js to .ts Rename each file’s extension from from .js to .ts (.tsx).

Only files with .jsx need to be named as ’.tsx’ or else use ‘.ts’.Step 4: Add type definition for packages If you get errors like “Could not find a declaration file for module xxx.”, they can usually be resolved by running the following command.

If the error still persists you need to add custom module definition for packages.Step 5: Add custom Type definition for packages with no declaration In your src folder create a file with extension .d.ts. Declare the missing module to the file as follows.

Make the following changes to tsconfig.json file to point to your declaration file/folder.

Step 6: Add Interfaces and types (wherever required) The following object will give error in typescript.

If you get errors such as the ones below:error TS2339: Property name does not exist on type ‘{}’.error TS2339: Property age does not exist on type ‘{}’.You can fix them by updating the code the following way:

Or create an interface and use it as below

“Any” type can also be used for solving the above problem but it is not considered best practice and should be avoided.Add types to functions:

The above function takes two parameters which can be either string or number, but we want these to be number so we rewrite the functions with types.

The code should be updated wherever necessary.Step 7: Strictly Typed To enable strict type you need to update the configuration file with the following settings.

Additional setting

Enabling the above settings are optional.

Conclusion

Transitioning from JavaScript to TypeScript offers significant advantages in code quality and bug prevention. Through this guide, we've outlined a straightforward process to facilitate the migration, from integrating TypeScript dependencies to enforcing strict typing. Embracing TypeScript empowers developers to enhance readability, minimize errors, and optimize the development process, ultimately contributing to more robust and maintainable code bases.