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.

Noletta

If you put your typescript target to es6, you essentially 'strip off' the type annotations on compilation. Does that answer your first question? For you second question, I have no idea. – Cattan

@PelleJacobs Sorry, should have mention this explicitly: code should maintain a good shape. Transpiling kills all formatting and ES.next features and turns the code into steaming pile of ES6. – Noletta

Hm. I'm pretty sure this is your only option though. IMHO the compiled code is pretty decent, they spent quite some time on making it format fine, to the extend that it's being used to teach javascript code style. If it's really not good enough, you should just open an issue on the github project. – Cattan

@PelleJacobs It isn't an option, sadly. Decorators, async functions, etc are all ruined, JSDoc comments on class properties are deleted with ES6 target. I guess I will open an issue, but I'm quite sure isn't it won't get a priority in the next couple of years. – Noletta

tsc --target esnext will only transpile decorators. All other syntax will be left untouched. – Swindell

@AluanHaddad It's a good thing it's finally there. But I assume that TS still trims whitespace, doesn't it? – Noletta

@estus yes and may change formatting. – Swindell

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.

Cynar

Further detail explanation of above can be found at blog.logrocket.com/… – Watchful

Answer 2

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 :)

Emie

I have a question about writing Flow library definitions. What does declare actually do? It does not seem to be necessary. Unfortunately nobody responded to this issue on Github that I came across that asks the same question: github.com/facebook/flow/issues/4053 I'm reluctant to make anything public if I don't really understand what I'm doing. I found no documentation for declare. – Daughterinlaw

Answer 3

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.

Noletta

Answer 4

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

Dendy