Migrating large services incrementally from JS -> TS

[fluid glen]

Hey all,

We have recently decided to migrate our services over to TS but we 'd like to do so bit by bit as our services are quite large.

One problem we have is deciding on which files to start with. It can get quite tricky updating one file to TS, but you then see it's imported in another file, so that now needs to become a TS file too as you cant import TS into JS.

Are there any tools available to identify JS files that aren't being imported into any other JS file, so that we could avoid this issue in the beginning?

Thanks!

[lilac cobalt]

you can import ts into js just fine, wdym

since at runtime you wouldn't be importing ts anywhere

[fluid glen]

are you suggesting importing the compiled js file into the parent js file that requires it?

[lilac cobalt]

yeah, that's perfectly fine

Are there any tools available to identify JS files that aren't being imported into any other JS file, so that we could avoid this issue in the beginning?
the only file that isn't imported would be your entry point. that's what an entry point is

https://www.typescriptlang.org/tsconfig/#allowJs

[fluid glen]

Thanks, im not sure how the allowJs option impacts my ability to import TS into JS files though

[lilac cobalt]

it copies js files to outDir so at runtime they have the proper relative paths

[wintry spruce]

you wouldn't import TS per se, since you can't run TS files. at runtime all TS would be JS, and node wouldn't know/care whether you compiled it from TS or wrote it manually

[silent dawn]

I suggest allowJs: true, checkJs: false, strict: true for incrementally migrating projects.

You can leave files in JS until you're ready to migrate them to TS, and when you do you address any strictness issues.

You can import JS files from TS files, but the things imported will be any. (Unless you add them via JSDoc comments but usually its easier just to migrate the 'downstream' files into TS)

[fluid glen]

Yeah that was my original concern really, was seeing how easy it was to generate a kind of dependency tree that showed any JS files that weren't imported into any other files as they'd be prime candidates for moving over to TS first

But seems like the consensus is to just update the import paths to point towards the transpiled JS file associated with the TS file in cases where it is imported in another JS file

I think because we deploy with serverless framework we've been leveraging a plugin for typescript so we haven't really had to deal with the transpiled files at all before as that's just handled during deployment for us

[lilac cobalt]

you shouldn't have to change any import paths

the relative positions will stay the same after transpilation

[fluid glen]

Sorry I'm coming across so dumb, haven't really touched TS before and I'm having these chats away from my dev environment, but I thought you'd get errors trying to import a TS file into a JS file

[lilac cobalt]

you would, but you wouldn't for the transpiled version

[fluid glen]

I do get your point about the positions remaining the same after transpilation though

[fluid glen]

Right, this seems like it'd be a bad dev experience no?

[lilac cobalt]

allowJs lets tsc see .js as .ts and treat them the same

[lilac cobalt]

why do you think it would, exactly?

/src
  a.js
  b.ts
```you can write untyped code in `a.js` and `b.ts`, and tsc will "transpile" `a.js` just without the stripping types part, into this

/dist
a.js
b.js
```so the relative paths would still be ./b.js/./a.js

[fluid glen]

I'm imagining my linter going crazy at me trying to import TS into JS

[lilac cobalt]

have you tried it yet though?

don't imagine problems before they actually appear lol

[fluid glen]

No haha this is what I mean about being away from my dev env

Haha gotcha

I'll have a look this evening

Thanks for your patience

[lilac cobalt]

you would have to make your linter ts-aware

assuming that's eslint, you would use @typescript-eslint

[serene moth]

In case you are thinking "if I migrate foo.js to foo.ts, then I'll also need to update the code in bar.js from import ... from './foo.js' to import ... from './foo.ts'" then that's not true.

You do not need to update the import of foo.js to use .ts, you would still use .js, because foo.ts is already compiled to foo.js by the time your code runs, so you should still be importing using .js.

[fluid glen]

Interesting, I did just have a quick look and yeah there's no issues requiring TS modules into JS files. I think one of the contractors at my place mentioned something to do with updating one file to TS causing a sort of domino effect of needing to update those JS files that were using it

But that just doesn't seem to be the case