How to convert and migrate your project from TypeScript to JavaScript

If you're in the development community you will have seen @dhh talking about dropping TypeScript from Turbo 8.

Now, I'm by no way a DHH fan boy, however, it got me thinking about our own project BoardShape. When I reflected on the work we had done, and particulary thinking about our pair-coding (which is something we do often), so much of our time is spent wrangling TypeScript. I don't want to spend too long writing about the good points and bad points of TypeScript, I was just interested to see how quickly I could take our project from entirely TypeScript to entirely JavaScript.

Let the fun begin

Step 1 - Branch:

I branched main (duh!).

git checkout -b ts-js

Step 2 - Remove packages:

I looked through package.json and removed a bunch of packages.

npm remove typescript
npm remove @types/node
npm remove @types/react

... etc. You'll need to work out which packaged you don't need.

Step 3 - Remove tsconfig and check paths:

You might have some paths for libraries in your tsconfig, so copy those out.

Delete tsconfig.json from the project. Don't need that anymore.

Create jsconfig.json and add your paths, e.g:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@components/*": ["components/*"],
      "@lib/*": ["src/lib/*"],
      "@utils/*": ["src/utils/*"],
      "@hooks/*": ["src/hooks/*"],
      "@seeds/*": ["seeds/*"]
    }
  }
}

Step 4 - The fun part, converting TypeScript to JavaScript

So, this is the bit that bothered me. We've got about 300 odd .ts and .tsx files in our project. I did not want to manually convert everthing. Obviously, TS just gets transpiled to JS but the transpiled JS is not really easy to read and the formatting is not what we want. I certainly don't want to maintain 300 JS files that are in transpiled format.

A quick google search will lead you to a great project transform.tools - it's open source, and you can grab it at https://github.com/ritz078/transform - using the public version it seemed to do a good job of stripping out my TypeScript. I was pretty amazed there isn't just an easy CLI to do this, and it seems like Babel is what transform uses if you look at the API (https://github.com/ritz078/transform/blob/master/pages/api/typescript-to-javascript.ts) but I couldn't get this to work on the command line easily.

So, after failing to find a better solution, I downloaded the transform.tools source code and set it up locally, it ran under localhost just great. I did this because I didn't really want to hit their server with all my source code for a few reasons!

Then, I wrote a simple script to iterate over ts and tsx files. Please excuse how crude this is, I literally through it together and every time I made a mistake I just reverted my branch until I got it right.

Here is the script:

#!/usr/bin/env node
var dir = require('node-dir');
const fs = require('fs');

async function run() {

  dir.readFiles(__dirname, {
    excludeDir: ['node_modules'],
    match: /.ts$/,
    }, function(err, content, filename, next) {
        if (err) throw err;

        const response = fetch('http://127.0.0.1:3000/api/typescript-to-javascript', {
          method: "POST",
          body: content,
        }).then((response) => {
          response.text().then((value) => {

            fs.writeFile(filename, value, err => {
              if (err) {
                console.error(err);
              }
            });

          })
        })

        next();
    },
    function(err, files){
        if (err) throw err;
        console.log('finished reading files:');
    });


}
run();

This just does the .ts files, you can see the match line which you can change to .tsx to process those.

All this does is: loop over files (ignoring node_modules) and posts any .ts content to our transform.tool running locally. It then writes out the response and saves the file.

You will need to ensure you have an up-to-date nodejs install so fetch is available and you'll have to npm install node-dir.

With this done, we jus thave to change file extensions.

Step 5 - Rename files

Just a bit of bash to change our .ts files to .js and our .tsx to .jsx:

find ./ -depth -name "*.ts" -exec sh -c 'mv "$1" "${1%.ts}.js"' _ {} \;
find ./ -depth -name "*.tsx" -exec sh -c 'mv "$1" "${1%.tsx}.jsx"' _ {} \;

Step 6 - Build and fix

Run your build step. See what's broken.

In my instance, there were about 3 occurences where the transform.tool had put in unwanted function brackets. Easy to fix.

Step 7 - Test

Obviously, don't skip this step. You wouldn't, of course.

And hey-presto, you're done. This took me a couple of hours of experimentation. Hopefully this helps you do things a little faster.

Please check out our project BoardShape.com if you’re interested in running better board meetings with our Board Management Software for Startups.