Migrating from ES5 to TS gradually

Question

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

Moustache

I'll be the first one to say it; don't do it. With thousands of js files, "gradually" probably means years. That's years of working with a mixed bag of js and ts and having to deal with not only js problems, not only ts problems, but ts+js problems as well. To me, the thousands of js files are enough proof that the project has been workable without ts. Ts also adds zero value to the user and will most likely add negative value to developers for a long while - after all - it's not just the codebase that is migrating, all of the developers have to migrate too. – Drinkable

@Drinkable currently we're using grunt files to apply tasks to minify and combine js, but instead we need to heavely depend on ts-loader or babel to make the progress – Moustache

Beside the benefits of tree shaking and lazy-loading when using typescript and ESM – Moustache

As I have been you twice, and still work on one of those projects, I suggest using your First way, but we used ESM for ts files and let tsc do the magic converting it to ES5. The context of my experience is the same, thousands of working JS files but willing to create new things in TS. Both migrations, or coexistence to be precise, worked wonders because working JS remains working but new code and maintenance code is made in TS, easing heavily the development process; also developers are happier, win/win. – Sinclair

typecsript does not equal typesafety! It woulld be better to spend time identifying where type safety/validation is needed and adding validation routines. The benefit that typescipt provides is type hinting, this can be achieved by well written tests and using modern IDE's – Simplicidentate

Answer 1

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

Moustache

Answer 2

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.

Incondite

Answer 3

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.

Conductance

Answer 4

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

Tadpole