Migrating from ES5 to TS gradually

user_11115145 0
Viewed 247

I am running on a huge project with thousands of .js files that are written in es5, and for many reasons and benefits of TS, we've decided to start migrating to TS, after a couple of days and many pieces of research, I am going to elaborate a couple of points:

To start migrating from es5 to ts we can start either by two ways:

First way:

1- Installing ts, creating tsconfig with allowJS set to true then start changing the extension of files to .ts and everything will work by default

2- As we want to migrate gradually we don't want at once to replace the global scripts to native modules, in other words, we don't want immediately to type import and export, but instead we want to keep the old way global scripts and use /// <reference path=""> to load dependencies

3- after previous step we can gradually start turning the files into native modules esm

Second way:

1- As I've read about UMD it will work on both borwser(client) and server, which means support all type of modules AMD, CommonJS, SystemJS and Native ES modules

2- after re-writing the scripts in UMD fashion, we can gradually start moving our scripts to ESM

last but not least, and regarding the intelligence we'll start writing .d.ts files accordingly or we can rely on ts-loader to generate the files

lastly, we either go with ts-loader or babel but we are not sure if there are couple of limitations for each of which

Any idea is really appreciated on what is the best way to start migrating

ts-loader babel-loader typescript ecmascript-5 javascript
4 Answers

Maybe this tool can help you: https://github.com/airbnb/ts-migrate

ts-migrate is a tool for helping migrate code to TypeScript. It takes a JavaScript, or a partial TypeScript, project in and gives a compiling TypeScript project out. ts-migrate is intended to accelerate the TypeScript migration process. The resulting code will pass the build, but a followup is required to improve type safety.

user_106200200

If possible, start fresh and write migration script which does copy/paste task of code. In which Project setup will be error free in term of compile/build/run/lint. So even in future there won't be any issue you just need to add modules. You can migrate module by module.

Now if you are migrating to TS means not just by extension or package type, because it won't benefit more, you will need to change in code like types, interfaces, configs etc.

So starting a fresh project and then converting code to TS and then gradually moving should be better.

user_61965420

I would suggest you should write new modules in typescript and slowly convert existing files and modules to typescript. But keep the output in js only. Convert each ts file into js, For e.g, if you have a module Utils create two folders inside this ts and js. Write a build script which will convert ts to js and move inside the js folder. This way you will be converting all files into ts. For import/export you can start it for the new module. I have done the same in one project.

Regards, omi

user_13984650

I appreciate all the answers but for my case it is so complicated because ts modules will affect the scope, what I found useful is using what so-called shimmer modules in webpack which allows a feature called imports-loader which I can use to manipulate the scope of js, hence nothing is broken, then I can move file by file to start migrating

user_111151450
Related