Flow or Typescript static typing with Javascript?

If you want to use static typing, you’ll come across two options for use with Javascript, especially React: a) Flow and b) Typescript. Which should you choose?

TL;DR: TypeScript is much better ergonomically, in tooling, and in ecosystem. Use TS with eslint .

At a first glance, Flow looks easier. You don’t have to do anything other than add //@flow and optional type properties to get going. How awesome is that? Plus Flow is from Facebook, the company that made React. And they have a much easier to type domain (flow.org compared to typescriptlang.org) (typescript.org is some kind of outmoded CMS).

That’s exactly what attracted me to Flow in the first place. Much of what you can find using basic web search seems to indicate the two are roughly equivalent. But I quickly found out that’s not true.

Just look at the Flow FAQ, there are so many things that intuitively should work, but don’t because the technology is limited. It tries valiantly to do magic and make static typing out of dynamic code. Ultimately, there are too many corner cases you have to keep in mind or deal with using extra annotations.

The tooling is iffy as well. Magic unfortunately is not easy. It’s a type-checker and not a compiler. My guess is it’s missing information that a compiler inherently has, and thus has to work harder to chase down many branches. As a result, the flow type-checker was rather slow in my experience. It made me stop and wait for the tool to catch up. The VSCode integration is especially terrible, in that sometimes the errors didn’t even show up, until I had moved on to something else.

Then I tried TypeScript and it was a breath of fresh air. Things were intuitive and they mostly worked. I am using TS only as type-checker, not a transpiler, as React requires Babel (unless you’re a masochist). But that’s fine, Babel has very good support for TS these days (minus a few minor features).

Almost all packages I come across either ship with types for TypeScript or someone has contributed them using @types/... on npm.

There are still some warts, though. The documentation could be better. eslint support is fairly recent and support was flaky for a couple of months. Old tslint linter has been abandoned.

I spent two or three bursts of effort where I converted large chunks of my code from JS to TS and found many bugs in the process. These bugs either showed up less often or were visual issues that I just never tracked down earlier.

Also some things are easy to do in plain Javascript, but are impossible (or at least very hard) to statically type. I left those bits in plain JS.

Hope this helps you make your decision if you’re looking to start with static typing in Javascript.

links

social