Flow vs Typescript: Tug of war

*Ding-Ding-Ding* Ladies and Gentlemen, grab your sodas take your seats and keep your JavaScript codes ready. We’re here for the ultimate decisive constant to find the one true winner that will cure Javascript’s childhood deficiency- Static Typing. But before we start the rope pulling, dirt dragging, name-calling contest between our two teams, it’s important to have a little insight into the Type System.

Type System – The Rope

Typing is one of the first three things that a programmer gets to know about. Variables to store data or methods to process or return data, all rely on the programming language’s Type System. A Type System, essentially, defines the rules that categorize the data for the various operations that can or cannot be one them. You can add two integers but you cannot write them in upper or lower case. Similarly, you can concatenate strings but you might find it difficult to get “Tug” times “War”. Not only this, the Types System also administrates the time when the type checking will be done for any code. It can be done before the execution of the code (static typing) or during the runtime (dynamic typing). For example, JavaScript here is dynamically typed. This means that the type of its variables and methods will be defined during the execution of the code. Therefore, you don’t need to implicitly declare the type of your variables while writing the JavaScript code, it will be decided automatically based on the data they’re holding during the execution.

Fun as it sounds, Dynamic Typing may not be always a boon. Sometimes during the execution, if the data types are not clearly defined, the program can produce some baffling logical errors. This is where our two teams come in. Flow and Typescripts both are there to provide the static-typing support for JavaScript. With names like Microsoft and Facebook backing them, both Flow and Typescript have found their decent client loyalties. That said, let’s go and have a chat with the two teams individually and try to know who’s going to be the ultimate winner. Don’t go anywhere, we’ll be right back.

Team A – Flow

Flow is known for its faster debugging. It practically gives a real-time feedback for the code using incremental rechecking. This means that each module separately checked by flow type. In addition to that, Flow also runs a semantic check of the code to know the dependencies of modules and their typed interfaces for type inferences. Used by Facebook itself, Flow is a big name and other type checkers look up to it. Its compatibility with JavaScript makes it a strong contender for today’s match.

Team B – Typescript

As per its own definition, Typescript likes to call itself a “typed superset” of JavaScript. It’s open source like Flow. While on one hand, Flow is known for its commitment to JavaScript, Typescript practically is JavaScript. However, syntactically, it has keywords specific to itself, the final code can be called by or converted to any JavaScript code so that it can seamlessly run on any browser. So, as far as this match is concerned, both teams look pretty strong, so let the games begin *Ding-ding-ding*

Round 1 – Compatibility

By compatibility here, we mean the technology which Flow and Typescript are compatible with. Flow is a good option if you’re going for ReactJS. This is because of its ease of integration with Babel. Typescript, on the other hand, goes well with Angular. Thus, we have a tie here as the winner completely depends on your pick.

Round 2 – Translation to JavaScript

Both Flow and Typescript are pretty serious about their relationship with JavaScript. But when it comes to translating the Type annotations to JavaScript code, we have a clear winner. While Flow relies on Babel or other similar tools for the translation, Typescript, being a transpiler as well, can do this on its own. They don’t call it JavaScript’s “typed superset” for nothing.

Round 3 – Code Understanding

Guessing the winner for this won’t be that difficult. Flow, as we know now, understands the code at the semantic level to provide better type inferences. Its proactive knowledge of the code and it modules makes it a clear winner in this round.

The Judgement

After a long strength-testing match we’d call this match a draw. Here are some salient points that bring us to this conclusion:

  • The choice between Flow and Typescript as the type checker for your JavaScript code heavily depends on the type of technology you’re planning to work with.
  • Although Flow has an almost parallel debugging feature, it loses a point in translating its type annotations to JavaScript. However, its ease of compatibility with Babel compensates for this lack.
  • Apart from being a transpiler and type checker, Typescript also has better code navigation and refactoring which gives it an upper hand on Flow
  • Flow’s understanding of the semantics is unparalleled which gives it a bonus point. Flow has a deeper understanding and better scalability with the JavaScript code.

Hence, your preference of the features and the kind of tools you’re using for your application play a major role to choose best among these equally amazing type checkers. For more information on Type Checkers and Javascript do follows us.


I am a technology freak with passion for UI technology.

Leave a Reply