The JavaScript tools Flow and TypeScript are similar in many aspects. However, they differ regarding their functionality and abilities as static checkers.

Find out how Flow and TypeScript compare and which is the best static checker for your next project.

What Is Flow?

Flow is a static type checker tool for JavaScript, created by Facebook to identify compile and run-time code errors beforehand. It does this by monitoring the values your code passes and how their data types change over time. This static checking system improves reliability and readability. It also helps reduce the occurrence of bugs in your JavaScript code.

What Is TypeScript?

TypeScript is not just a type checker, like Flow, but a strongly-typed programming language. Microsoft created the language, building it on top of JavaScript.

By convention, you should create TypeScript files with a .ts file extension. You can compile a TypeScript file into JavaScript code, so wherever JavaScript runs, TypeScript can run too.

Configuring Flow for Your JavaScript Application

You can integrate Flow into any JavaScript framework you decide to use for your project. You will need to have configured a JavaScript compiler like Babel to handle all the flow types in your code and compile it into vanilla JavaScript.

To install Flow in your project, run the following command:

        yarn add --dev flow-bin

    

Next, you should install the Flow command line interface globally. This CLI provides several commands for building flow applications.

On macOS, use Homebrew to install Flow CLI:

        brew install flow-cli

    

You will need to know how to use Windows PowerShell to install Flow on a Windows machine.

To install Flow CLI on Windows, run this script in your PowerShell terminal:

        iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"

    

Flow projects require a .flowconfig file for all necessary configurations of the tool.

Run this command to create a Flow configuration file in a new or existing project:

        npm run flow init

    

Be aware that specific frameworks may ship projects with a Flow config file by default.

The last thing to do is add the Flow script to your package.json file:

        "scripts": {
    "flow": "flow"
},

    

You have now successfully configured Flow to run in your JavaScript application.

Setting Up TypeScript in Your Project

Run the following command to install TypeScript in your project:

        npm install typescript --save-dev

    

You should also install the compiler to compile TypeScript code into vanilla JavaScript. You may also need to set up the TypeScript config for a better workflow experience.

Install the TypeScript compiler globally with this command:

        npm install -g typescript

    

To initialize a tsconfig.json config file, enter the following command into your terminal:

        tsc --init

    

The above instructions will get you started using TypeScript in your project.

Building With Flow

To write Flow code in a JavaScript file, declare the Flow syntax at the top of the code before any expressions or statements:

        // @flow

    

You can set variable and function data types using annotation. Flow will then raise an error if the anticipated type is not met.

For example:

        // @flow
let foo : number = "Hello";

    

Flow will throw an error here because the expected value type of foo is a number, not a string.

Run npm run flow to see the error output in the terminal:

Enabling the Flow extension inside any text editor of choice will show the errors in your editor as you code.

Flow also uses type inference to determine what the expected value of an expression should be.

For example:

        // @flow
function doSomething(value) {
    return  value * "hello";
};
 
let result = doSomething(6);

    

You cannot execute arithmetic operations between the number six and the string hello.

The output of npm run flow will be an error:

Developing With TypeScript

TypeScript's type syntax is very similar to Flow's. You can define variable and function types with type annotation just as you would in Flow.

TypeScript ships with several other features similar to Flow, like type inference.

Take the example TypeScript code:

        // Typescript.ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
    if (result === "pass") {
        console.log("Passed")
    } else {
        console.log("Failed")
    }
}

    

You can run tsc Typescript.ts to compile this code to plain vanilla JavaScript.

This would be the same TypeScript code compiled into vanilla JavaScript:

        function verify(result) {
    if (result === "pass") {
        console.log("Passed")
    } else {
        console.log("Failed")
    }
}

    

Pros and Cons of TypeScript and Flow

Now you know how to get started using both tools in your JavaScript project. You should know the pros and cons of using each.

Integration

The setup process to use Flow is somewhat more complex as opposed to TypeScript. You will need to set up a JavaScript compiler like Babel or flow-remove-types to strip out flow types from your code. TypeScript includes a compiler to convert TypeScript code to JavaScript, making integration easier.

Tooling

TypeScript has much better tooling and most JavaScript frameworks support it by default. Most popular IDEs provide first-class support for TypeScript. Flow is also supported but requires a special plug-in.

Community

Unlike Flow, JavaScript frameworks like React, React Native, Vue, and Angular support TypeScript out of the box.

This widespread adoption and large community result in better learning resources, updates, and tool support.

Flexibility

Flow acts as a type checker that works to warn you about potentially bad code. TypeScript prevents you from writing bad code and has a strict type system. TypeScript also supports object encapsulation, which helps keep complex code manageable. Flow does not have this feature.

Services

TypeScript provides all the JavaScript language services, like code refactoring and auto-completion. Flow is a static type checker that provides a deep understanding and analysis of your written code.

Flow can work down to your project's imported modules and libraries and discern how they affect your code. For example, it can detect and throw a warning when a required library in your project is missing or when you try to access a definition that does not exist.

Which Static Checker Should You Use?

There are many valid arguments for using each tool because each has different features. Some may be of top priority to one developer and low priority to the other. Both tools work well in their own respects and offer advantages for using them.

You should examine the requirements of your project and make an educated decision based on them.