One's backed by a huge community, the other one by Facebook itself. One provides you with great support, right out of the box, while the other one's lighter and "tempts" you with better-inferred types. So, in a TypeScript vs Flow comparison, is there a clear winner?
Or are they... same-ish and it's just their specific use cases that differentiates them from one another?
If so, which type system for JavaScript is the best fit for your own project?
Let's get you some answers:
1. But First: Why Not Just Go with... Plain JavaScript?
Before asking yourself "Flow or Type" you must have surely wondered:
Why not stick to... typeless JavaScript?
Why do you need to add a type system to JavaScript in the first place?
It's simple: because maintaining a large JS application gets more and more challenging as you scale it up. The bigger your project gets, the more chances are that type errors will start to "sneak" into your production code...
And this is where a type system steps in:
Its role is to generate additional information about the types behind each variable. A type checker sees whether the code is plausible; no need for you to actually run it.
For instance:
- it identifies null values
- it checks that functions get the right params
The key benefits? More stable code and streamlined development.
2. What Is TypeScript Used For?
Let's start with: "What is TypeScript and what problem is it meant to solve?"
TypeScript is an open-source programming language developed by the Microsoft team precisely to make the use of JavaScript a lot more efficient.
With more and more JS piling up and with new JS features (e.g. classes) being created and remaining challenging to use, TypeScript was designed as a JS extension.
One that would make maintaining massive volumes of JavaScript and integrating modern programming paradigms a lot simpler.
3. What Is Flowtype?
Before we delve into a TypeScript vs Flow head-to-head comparison we should first outline the main motivation for building Flow:
It was developed by Facebook to make its own JS codebase easier to maintain. More reliable...
Compared to TypeScript, which was built with the idea of usability and efficiency in mind, Flow's designed for... reliability.
Also, unlike TypeScript, Flow is a type checker for JavaScript (not a programming language). You can use it as a locally installed productivity tool to generate useful insights about your code (e.g. to expose type errors).
4. Flow: Does It Have Any Advantages over TypeScript?
And it's a more than legitimate question to ask yourself considering these days' megatrend to migrate from Flow to Typescript (see Yarn and Jest).
To answer your question, let me break down some of Flow's biggest selling points:
Why Use Flow?
- it's quicker to learn, lighter
- it becomes the obvious choice when working on a React-based project; Flow integrates seamlessly with Babel and the existing infrastructure
- its biggest advantage over TypeScript is its robust ability to infer types; it will detect many more bugs than its "rival", with no additional type definitions needed
- it makes the best choice if you want to make the most of static type checking functionalities; there's no need to write non-standard JS code when using Flow
- it will go deeper into your code, generating an interprocedural analysis
What Could Discourage You from Using Flow?
- the (too) many code-breaking changes with each new upgrade
- poor documentation; also, disappointing Windows and VSCode support (your CL turns out to be your only 100% reliable friend here)
- you run the risk of having your code compile with wrong types and so Flow might overlook certain errors
- although typings are enforced in CI, you still run the risk of having some errors pushed into git
- slow(er) feedback loop
- at times, you get "weird" error alerts pointing out to node_modules with type errors; ignoring them will only leave your code susceptible to type safety bugs
5. TypeScript: Selling Points and Drawbacks
An overwhelming majority of TypeScript vs Flow comparisons establish the first as the "norm". There's a massive migration to/adoption of this particular type system (judging by its NPM downloads).
And here are the main selling points behind its popularity:
Why Use TypeScript?
- few breaking changes
- it's much faster (by comparison, the Flow server is taking a lot more resources)
- it provides better tooling
- it has better compatibility with a lot more compilers, libraries, and frameworks
- it provides you with the right type of declarations, every time; you'll only need to use `npm i @types/<module-name>` and... that's it
- it has better coverage and it's easier to use: no more node_modules type errors
- excellent documentation
- more frequent updates (that won't break existing code!!!)
- feedback loops are tighter: TypeScript ships with better VS Code support
- you'll get extra language services: refactoring, navigation and code completion features
- it's backed by a large and active community; the main competitive advantage over Flow is its engaged and supportive community that keeps adding new features (see conditional types)
- it has a more open development process (while in case of Flow, everything happens "behind Facebook's closed doors")
- it provides a whole lot more type signatures
- it's more stable: there's no need to upgrade your code with every single update
What Could Discourage You from Using TypeScript?
Learning it is a bit more time-consuming
- worse type interface
- there's no optional chaining
- it uses compiler flags, which translates into a different kind of strictness for each and every project
- you run the risk of bumping into an npm package with no definition files...
- it's not the best choice for React projects: there's a bit more work involved in seamlessly integrating it, whereas Flow makes the perfect fit for React
6. TypeScript vs Flow: What's the Verdict?
The verdict is that... it depends.
It depends on your project needs, on your/your team's specific preferences and experience.
Do you need a type system that integrates perfectly with your React Native project? Flow is your go-to option for React-specific workflows.
Do you work on an Angular 2+ project? Then TypeScript is the best choice for you.
Or maybe you value Flow's utility types more than TypeScript's top performance and IDE support?
Now, with this head-to-head "Flow or Type" comparison at hand, all you need to do is set it against your own project's needs and... identify the matches.
Image by Andrew Becks from Pixabay