TypeScript vs Flow

At a Glance

What is Flow?

Flow is a static type checker for JavaScript developed by Facebook (now Meta) and open-sourced in 2014. Rather than being a new language, Flow reads standard JavaScript files annotated with type comments. A Babel plugin strips the annotations before the code runs, so Flow never changes what your JavaScript does — it only checks it.

Flow popularised gradual typing — the idea that you can add // @flow to individual files and only those files are checked. This let large existing codebases adopt types without a full rewrite.

Flow is still used heavily inside Meta and by a small but dedicated community, but its broader adoption has stalled as TypeScript grew.

What is TypeScript?

TypeScript is a typed superset of JavaScript developed by Microsoft and released in 2012. Every valid JavaScript file is also a valid TypeScript file. TypeScript adds static types, interfaces, enums, generics, and decorators, then compiles down to plain JavaScript.

Because TypeScript is a proper compiler (not just a checker), it can produce optimised output, enforce strict null checks, and provide the data VS Code needs to offer best-in-class autocomplete and refactoring — all without any extra plugins.

Today TypeScript is used by Angular, Next.js, NestJS, Deno, Bun, and most major frontend frameworks. It has over 45 million weekly npm downloads.

Syntax Comparison

Basic annotations

// TypeScript
function add(a: number, b: number): number {
  return a + b;
}

const name: string = "Alice";
const age: number = 30;
const active: boolean = true;

// @flow
function add(a: number, b: number): number {
  return a + b;
}

const name: string = "Alice";
const age: number = 30;
const active: boolean = true;

Nullable / optional types

// Nullable via union
function greet(name: string | null): string {
  return name ? `Hi ${name}` : "Hi stranger";
}

interface User {
  name: string;
  email?: string; // optional
}

// Nullable via Maybe type ?T
function greet(name: ?string): string {
  return name ? `Hi ${name}` : "Hi stranger";
}

type User = {
  name: string,
  email?: string, // optional
};

Generics

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

type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

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

type ApiResponse<T> = {
  data: T,
  status: number,
  message: string,
};

Ecosystem & Community

Frequently Asked Questions