Remove TypeScript type annotations and assertions from code base

Question

Considering that there is a project that should be converted from TypeScript to Babel, files contain typing information that cannot be just ignored by Babel.

How can TS type annotations and assertions be stripped off from the entire code base in automatic manner?

Is there a way to convert them to Flow (considering that some TS type features can be converted and some can't)?

Obviously, this cannot be obtained via regexps.

The project has a lot of TS/ES.next features in its code and supposed to be readable and editable, transpiling with es6 target is not an option here.

Answer 1

To strip TypeScript:

If you have a working TS project

That means you have all dependencies and your project typechecks.

use tsconfig.json:

{
  "include": ["./<SOURCE_DIR>"],
  "compilerOptions": {
    "outDir": "./<OUT_DIR>",
    "target": "es2020",
    "module": "es2020",
    "strict": false,
    "esModuleInterop": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

and run npx tsc -p tsconfig.json

You get ES6 without TypeScript.

Answer 2

@babel/preset-typescript does exactly as you specify.

Answer 3

This is actually interesting question. I'm on the Flow team so I really want to have a good answer to it, but it's not going to be simple right now.

First off, you might want to ask why you really want to switch from TypeScript to Flow. For an existing project you should consider if it's worth spending time on switching.

That being said, if you do find it to be worth it I will describe what I think is best.

Incremental migration

Obviously stopping and rewriting everything is A Bad Idea™, it would be tragic to throw everything out and start over. This goes into the design decisions of just about everything we build at Facebook including Flow. Flow is designed to migrate applications incrementally to having static types.

However, moving from one static type system to another is a bit different. It might actually be a bit easier because things have been built with types in mind.

Move one file at a time, try to cut yourself off in places so that you don't overwhelm yourself with a ton of work to do.

Have good libdefs

Flow is designed to infer as much as possible, but one of the things that helps it a lot in applications is to have awesome definitions for the libraries that you use everywhere.

So I would focus on migrating the libdefs to Flow either finding the ones that exist out there, or writing your own. If you want to know more about this I wrote a pretty in depth article about it.

Make sure you contribute any libdefs you write back to the community!

Setting up your build system

TypeScript has compilation and type checking all built into the same compiler. However, Flow breaks them apart so that you have multiple options. For most stuff Babel is recommended, if you've never setup Babel before there is an interactive page for it here. Once that is done, I also wrote this guide about next steps.

---

It's extremely likely that you are going to face hiccups in this process, please be sure to let us know about them so that we can help you out and make sure that others who follow don't have the same difficulty.

Hopefully this helps you out a lot. Have fun :)

Answer 4

Sucrase typescript transform allows to strip off TypeScript types from the code and output ES.next code without losing formatting (comments and whitespaces).

This covers the first part of the question that doesn't address Flow.