TypeScript vs. Flow
Tags: flow, typescript, javascript
Published: 2020-02-24 15:05:39

---
title: TypeScript vs. Flow
published: true
date: 2020-02-20 17:00:02 UTC
tags: flow,typescript,javascript
canonical_url: https://blog.logrocket.com/typescript-vs-flow/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/99rm4vy69brmnhi6z46m.png
---
**Written by [John Au-Yeung](https://blog.logrocket.com/author/johnau-yeung/)**✏️

JavaScript is a dynamically typed language. This means that data types of variables can change as we assign different values to them.

There’s no built-in way to annotate or restrict the types of variables. Therefore, we need to write our programs in another language and then transpile it to JavaScript if we want that capability. We need a language that’s a typed extension of JavaScript to check and restrict the types of our variables.

There are two typed extensions of JavaScript, [Microsoft’s TypeScript](https://www.typescriptlang.org/docs/home.html) and [Facebook’s Flow](https://flow.org/). In this article, we’ll look at and compare the features of each of these.

| | TypeScript | Flow |
| --- | --- | --- |
| Developer | Microsoft | Facebook |
| First released | October 1, 2012 | November 18, 2014 |
| License | Open source | Facebook |
| Community | Large | Small |

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Developer experience

The developer experience can be measured using various scenarios, including support by various libraries and frameworks, ease of use, and overall productivity. The full documentation of TypeScript can be found [here](https://www.typescriptlang.org/docs/handbook/basic-types.html) and the full documentation for Flow can be found [here](https://flow.org/en/docs/).

From the support perspective, TypeScript is much better because major frontend frameworks like Vue, Angular, and Facebook’s own React all support TypeScript out of the box. For example, we can build a Vue project with TypeScript by choosing the TypeScript option from the Vue CLI.

Once we chose TypeScript, then we can configure it to transpile to JavaScript, (usually ES5) to maximize the support of browsers.

Then when we reference Vue when creating our component we’ll get TypeScript type inference:

```jsx
import Vue from 'vue'

const Component = Vue.extend({
  // ...
})
```

Also, with Vue, we can write components with TypeScript in its own special way with classes like this:

```jsx
<template>
  <button @click="onClick">Click!</button>
</template>


<script lang="ts">
import * as Vue from "vue";
import { Component } from "vue-property-decorator";

@Component()
class App extends Vue {
  public message: string = "Hello World";

  public onClick(): void {
    window.alert(this.message);
  }
}

export default App;
</script>
```

We can see the familiar JavaScript syntax with some TypeScript annotations. For example, Angular is built with TypeScript and it uses TypeScript almost exclusively. There was an option to write Angular apps with plain JavaScript but it never caught on.

On the other hand, Flow is only supported by React. According to [this](https://flow.org/en/docs/react/) document, we can use Flow with React, we just have to add Flow support in the Babel configuration to enable support for Flow with Babel.

To add Flow support, we just run:

```jsx
npm install --save-dev @babel/preset-flow
```

and add:

```jsx
{
  "presets": ["@babel/preset-flow"]
}
```

to the `.babelrc` file.

The syntax differences between Flow and TypeScript isn’t significant. They both support similar types like the usual JavaScript data types, literal types, union types, conditional types, etc. Also, both TypeScript and Flow use similar syntax for type annotations.

Both TypeScript and Flow have operators and various utility types to preserve the flexibility of the JavaScript type system. For instance, the following is the same in both Flow and TypeScript:

```jsx
function concat(a: string, b: string) {
  return a + b;
}
```

The function above takes two strings and then returns both concatenated together. They both have types for optional properties. TypeScript has the `nullable` type and Flow has the `maybe` type. Both Flow and TypeScript have generics, which we can use to write code that takes a variable type.

For instance, the following function takes whatever is passed in and returns the same thing:

```jsx
function identity<T>(value: T): T {
  return value;
}
```

We can use it by writing:

```jsx
identity<string>('foo')
```

Flow provides typecasting as does TypeScript. They work similarly. With Flow, we can cast a value to a related type by using the `:` symbol like this:

```jsx
let value = 1;
(value: number);
```

The code above is Flow code to cast a value type `1` to a number.

With TypeScript, we can cast types using the `as` operator like this:

```jsx
let value = 1 as number;
```

Another important feature that both Flow and TypeScript have are interfaces. Interfaces are used as types that restrict the structure of an object.

```jsx
interface PersonInterface {
  firstName: string;
  lastName: string;
  fullName(firstName: string, lastName: string): string
}
```

This is code for an interface in both Flow and TypeScript. Then we can create objects and classes that implement the interface with the `implements` keyword in both Flow and TypeScript.

```jsx
interface PersonInterface {
  firstName: string;
  lastName: string;
  fullName(firstName: string, lastName: string): string
}

class Person implements PersonInterface {
    firstName: string;
    lastName: string;
    constructor(firstName: string, lastName: string){
        this.firstName = firstName;
        this.lastName = lastName;
    }

    fullName(firstName: string, lastName: string): string {
        return `${firstName} ${lastName}`;
    }
}
```

The code above creates a class that implements the `PersonInterface` interface.

We’ll get an error with the Flow and TypeScript transpilers if we didn’t implement all the members listed in the interface.

One unique feature of Flow is that we can put our type checking code in the comments. For example, we can add comments for type checking like this:

```jsx
function greet(greeting /*: string*/) /* : string */ {
  return greeting;
}
```

This isn’t available with TypeScript. However, this isn’t a big draw since comments don’t have autocomplete or syntax highlighting.

TypeScript has much better support with text editors. Editors like Visual Studio Code and IDEs like WebStorm have built-in support for TypeScript. As we can see from [JetBrain’s website](https://www.jetbrains.com/help/webstorm/typescript-support.html), WebStorm has built-in support for debugging TypeScript code and also checking it for errors. Syntax and compilation errors are displayed right in the IDE. Hints are available as we’re typing in code in WebStorm. Type checking with TypeScript is built into these programs.

Supporting TypeScript means that developers get full type checking, auto-complete, and compiler errors right on the screen of your editor even before building the code. TypeScript code has type definitions that are added to libraries to denote the types that the code has.

It also has a language server to check for these types. Flow checks types locally and doesn’t have a language server or type definitions like TypeScript. We need to run the Flow compiler to check our app, whereas we can check our JavaScript code with a TypeScript language server as we’re typing code into our files.

Type definitions are bundled with libraries like Lodash and moment.js so that we get autocomplete and type checking support in text editors that work with TypeScript like Visual Studio Code.

## Developer experience comparison

| | TypeScript | Flow |
| --- | --- | --- |
| Editor and IDE support | Widespread | Little to no support |
| Questions posted on Stack Overflow | 100000+ | 600+ |
| Framework support | Many, including Express, Vue, React, Angular, etc. | React only |
| Library support | Many | Few to none (that we know of) |
| Autocomplete | Available in IDEs and text editors | None |
| Compiler error detection | Available in IDEs and text editors | None |
| Syntax | Comprehensive type checking, includes both static and dynamic type annotations | Comprehensive type checking, includes both static and dynamic type annotations |
| Generics | Supported | Supported |
| Support in existing projects | TypeScript package can be added to support TypeScript | Add support with Babel |

## Efficiency

The performance difference between Flow and TypeScript is minimal. TypeScript consistently uses 500 to 600 MB of RAM and Flow isn’t too different. There isn’t much difference between them in terms of computing resource efficiency.

According to this [Reddit](https://www.reddit.com/r/javascript/comments/7bfwpl/flow_vs_typescript/) thread, TypeScript is faster and less buggy.

## Community support

Community support for TypeScript is much better than Flow, as we have already mentioned. Other than React, Flow’s support is sparse. Most libraries don’t support Flow.

Also, there’s little documentation outside of the official sources, and in Stack Overflow, there aren’t too many questions about Flow when compared to TypeScript.

As we can see from [https://stackoverflow.com/questions/tagged/typescript](https://stackoverflow.com/questions/tagged/typescript), there are more than 100,000 questions for TypeScript and from [https://stackoverflow.com/questions/tagged/flow](https://stackoverflow.com/questions/tagged/flow) we only see a few hundred questions, and most of them have nothing to do with Facebook’s Flow. For instance, there’s also [documentation](https://create-react-app.dev/docs/adding-flow/) for adding Flow support to a Create React App project.

Also, for plain JavaScript projects, there is [documentation](https://flow.org/en/docs/install/) to install Flow support in an existing project via Babel. Many frameworks have support for TypeScript, including Vue, Angular, and React frontend frameworks as we saw above. Also, Node.js web frameworks like Express can have TypeScript support added. Nest.js is a backend framework that’s built with TypeScript support baked in, allowing us to use TypeScript for development without making big changes to our project.

For example, with Express, we just have to run:

```jsx
npm install --save-dev typescript
```

to install the TypeScript transpiler.

Then we can add a `tsconfig.json` file to configure our TypeScript transpiler by writing something like:

```jsx
{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}
```

Then to install the type definitions for Express and Node’s standard library, we run:

```jsx
npm install --save-dev @types/node @types/express
```

As we can see, it’s not too hard to use TypeScript with existing libraries since there are TypeScript type definitions for many libraries and frameworks.

For more type definitions for TypeScript, we can go to the [DefinitelyTyped](http://definitelytyped.org/) website.

As we mentioned in the developer experience section, editor support is way better with TypeScript. Visual Studio Code, Sublime, and other editors have support for TypeScript either built-in as with Visual Studio Code or available as a plug-in for Sublime.

## Resources and documentation quality

TypeScript definitely wins in terms of the quantity, resources, and documentation available.

Since it’s supported by many libraries and frameworks, lots of people are using TypeScript daily. There is plenty of information about each feature in TypeScript, including examples and explanations.

Here are a few more resources

- [quick start guides](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
- [detailed handbook](https://www.typescriptlang.org/docs/handbook/basic-types.html)
- [sample code](https://www.typescriptlang.org/samples/index.html)
- [sandbox to play with TypeScript code](https://www.typescriptlang.org/play/index.html?#show-examples)

TypeScript playground supports different versions of TypeScript so we can see how our code acts with different versions of the TypeScript transpiler.

On the other hand, Flow only has some [documentation](https://flow.org/) and a short document on how to set up [Flow with React](https://flow.org/en/docs/react/). There are also a few posts about Flow [here](https://www.shortcutfoo.com/blog/facebook-flow-tutorial/) and [here](https://dev.to/wemake-services/from-flow-to-typescript-why-1k7m).

## Conclusion

TypeScript is definitely the more widely used language that’s transpiled to JavaScript. TypeScript has more support than Flow does with libraries, frameworks, and it’s used more pervasively in apps because of that. They both provide very similar type checking abilities which retain the flexibility of JavaScript.

TypeScript and Flow both include all the built-in JavaScript data types. In addition, we can use it to define literal types, union types, intersection types, etc. to create more flexible types.

In addition, they both have interfaces to restrict the members that we can add to objects when they’re used to annotate the type of an object. For creating scalable JavaScript code, TypeScript is definitely the winner since no other alternatives have such pervasive usage and support.

* * * 
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [TypeScript vs. Flow](https://blog.logrocket.com/typescript-vs-flow/) appeared first on [LogRocket Blog](https://blog.logrocket.com).