How to migrate Aurelia project from Babel to Typescript?

1

I started a project using Babel sometime ago. Now time has passed and the project is mid/large size.

I was reading some articles about typescript and I saw many advantages in starting using it when projects get large. So I want to start migrating mine from Babel to TS.

Does someone has a good advice, guide. Of how should I start? Because I will probably have to update the packages.json and aurelia_project, to make use of typescript too.

In my first few attempts I created a TS based project using the CLI and tried to convert what was different from mine (Babel) from the new one (TS). I started getting some errors, that I could fix but when I was trying to load localhost:9000 it was getting an error trying to load /src/src/main instead of /src/main.

1 Like
2

I would personally scaffold a fresh TS Project with CLI and just copy over your sources, renaming them to .ts endings. Then install the dependencies plus the typings If not l provided out of the box

3

@zewa666 Well I kind of did that in a inverse way. I created a new project with the CLI, and copied over what was different to the babel project. And cleaned up the babel dependencies.

But when I ran, it was trying to get main in “/src/src/main”

4

@tbnovaes - the advice @zewa666 gave you is the correct way to go - you can see all the details in this section of the larger document being prepared to address situation like yours.

Note that you did not specify what means to load localhost:9000 - the correct way to do this is to run the command

au run

which is the principal difference from loading (running) a babel (esnext) application

5

@adriatic well aurelia runs by default on localhost:9000, of course I started the application with au run but the main could not be loaded, because aurelia was trying to load it using the wrong path. So something clearly went wrong with my approach. Idk what will be different doing the other way. But I will try it.

6

@tbnovaes - get a copy of the application typescript-navigation-skeleton which is the source code described in this tutorial, so you can start with something that works. This example shows how can you expand the basic CLI application (scaffolded by CLI) into the equivalent of the Typescript Navigation Skeleton.

Please be aware that I am not trying to nudge you into an excursion you may not be interested to take :slight_smile:

1 Like
7

There are subtle differences, also in varying dependencies, so really starting fresh and copying over your code files should be the easier way. TS is still a much different beast than VanillaJS :slight_smile:

8

You don’t even have to rename and convert them all to Typescript in one go. The TypeScript compiler has "compilerOptions": { "allowJs": true, which means it could probably compile your existing code without any changes.

This is great as you can set quite strict TypeScript compiler rules but they’ll only apply to the files you’ve converted to ts.

We went with quite strict compiler settings which ensures you have less ambiguous code

  • "noImplicitAny": true,
  • tslint:latest rules with a few modifications with highlighting and auto correction in vscode
2 Likes
9

Thank you everybody! I’ll try to use all the information I gather here. You are awesome!