How to migrate from Javascript to Typescript using the ts-migrate tool

Typescript (TS) is awesome!😻 It makes the code clearer, easy to maintain and prevents common errors. After careful consideration, you have decided that it’s the best choice for your team, and now you want to adopt it. Hooray! 🎉

Unfortunately, adopting TypeScript is not as easy as it may seem… as the process can be both tedious and time-consuming. So, how to migrate from JS to TS?
With Chat GPT! Not yet 😁. By utilizing ts-migrate, we can make the process easier 💫.

Credit to Michael Kolesidis (license)

About ts-migrate

ts-migrate is a tool designed to facilitate the migration of code to TypeScript. It can take in a JavaScript (JS) or partially TypeScript-based project and produce a fully compiled TypeScript project as output.

Recently, our team utilized ts-migrate to convert 1,000 files in our project from JS to TS, and it proved to be a valuable time-saver that made the entire process much more convenient.

Installing & Configuring TS

Before starting the migration process, we must install and configure TS:

• Install TS package:

npm install typescript@4.7.4 --save-dev

• Init TS configuration:

npx tsc --init

• Install React types (if you are using React):

npm install --save-dev @types/react

Note: The init command will create a tsconfig.json file. You can modify it later according to your requirements.

Converting JS files to TS

We will use ts-migrate to migrate our JS files into TS:

• Install ts-migrate:

npm install --save-dev ts-migrate

• Rename JS files to TS convention:

yarn ts-migrate rename <project-dir> --sources <specific-dir>

• Convert JS file to TS format:

yarn ts-migrate migrate <project-dir> --sources <specific-dir>/file.tsx

Note: It’s better to commit the renaming files changes first, then commit the conversion to TS changes. This way GIT recognizes the change as a single file modification rather than two separate changes, i.e., deleting the old file and creating a new one.

Note: I use NPM for installation and YARN for running ts-migrate commands. I found that ts-migrate works better for me with YARN, but you can use whatever you prefer.

Example 🤓

I created this ts-migrate-example project to demonstrate a migration process. First, clone it to your machine:

git clone https://github.com/shai20099/ts-migrate-example.git

Now, we will migrate our first JS file to TS 🚀.
First, we are going to rename the file:

yarn ts-migrate rename ./ --sources ./src/examples

After renaming the files, this is the result:

Our next step is to apply the migration script to the example file:

yarn ts-migrate migrate ./ --sources ./src/examples/example.ts

Now we can see some of the ts-migrate capabilities 🪄

ts-migrate detects that we try to assign a string to a number variable

ts-migrate notices that we attempt to re-assign a value to a constant variable

ts-migrate adding any-types where it is not declared

ts-migrate declaring missing properties to a class

Note: Where ts-migrate cannot auto-fix the TS issues, it leaves a @ts-expect-error comment with the error details.

Note: While ts-migrate puts types to variables where needed, we still need to remember to change any types to specific ones.

Note: ts-migrate uses plugins to make changes automatically. You can make it take more actions automatically by creating custom plugins for your project. More details are here.

Summary

Ts-migrate is a tool that assists in migrating code from JavaScript (JS) to TypeScript (TS). Its main goal is to create a compiled code while automatically fixing some errors using plugins. Although not fully automated, we have found ts-migrate to be an incredibly valuable tool. It is adept at identifying gaps between JS and TS, fixing what it can, and marking the code that needs to be fixed manually. This approach saves significant time during the migration, especially when dealing with a large number of files.

Good luck! 😃