TypeScript vs Flow

Disclaimer

Differences in usage and usability

Differences in syntax

bounded polymorphism

Flow

function fooGood<T: { x: number }>(obj: T): T {
 console.log(Math.abs(obj.x));
 return obj;
}

TypeScript

function fooGood<T extends { x: number }>(obj: T): T {
 console.log(Math.abs(obj.x));
 return obj;
}

Reference

maybe & nullable type

Flow

let a: ?string
// equivalent to:
let a: string | null | void

TypeScript

let a: string | null | undefined

function f(x?: number) { }
// is semantically the same as:
function f(x: number | undefined) { }
// and also same as (the `| undefined` is redundant):
function f(x?: number | undefined) { }

class A {
 foo?: string;
}

type casting

Flow

(1 + 1 : number);

TypeScript

(1 + 1) as number;
// OR (old version, not recommended):
<number> (1 + 1);

mapping dynamic module names

Flow

[options]
module.name_mapper='^\(.*\)\.css$' -> '<PROJECT_ROOT>/CSSModule.js.flow'

// @flow
// CSS modules have a `className` export which is a string
declare export var className: string;

TypeScript

declare module "*.css" {
 export const className: string;
}

Reference

Exact/Partial Object Types

Flow

type ExactUser = {| name: string, age: number |};
type User = { name: string, age: number };
type OptionalUser = $Shape<User>; // all properties become optional

TypeScript

type ExactUser = { name: string, age: number };
type User = { name: string, age: number, [otherProperty: string]: any };
type OptionalUser = Partial<ExactUser>; // all properties become optional

Reference

Importing types

Flow

import type {UserID, User} from "./User.js";
// equivalent:
import {type UserID, type User} from "./User.js";

TypeScript

import {UserID, User} from "./User.js";

typeof

Flow

import typeof {jimiguitar as GuitarT} from "./User";
// OR
import {typeof jimiguitar} from "./User.js";
type GuitarT = jimiguitar;
// OR (below also works in TypeScript)
import {jimiguitar} from "./User.js";
type GuitarT = typeof jimiguitar;

TypeScript

import {jimiguitar} from "./User";
type GuitarT = typeof jimiguitar;

Restrictive type

Flow

function stringifyNum(num: number) {
 // Do stuff
}
function stringify(value: mixed) {
 if (typeof value === 'string') {
 return '' + value; // Works!
 }
 if (typeof value === 'number') {
 return stringifyNum(value); // Works!
 }
 return '';
}

Typescript

function stringifyNum(num: number) {
 // Do stuff
}
function stringify(value: unknown) {
 if (typeof value === 'string') {
 return '' + value; // Works!
 }
 if (typeof value === 'number') {
 return stringifyNum(value); // Works!
 }
 return '';
}

Accessing the type of a Class

Flow

class Test {};
type TestType = typeof Test;
const instance = new Test();
type TestTypeFromInstance = Class<typeof instance>;

TypeScript

class Test {};
type TestType = typeof Test;

Nominal typing

Flow

class Foo {};
class Bar {};
const foo: Foo = new Bar();
// Cannot assign `new Bar()` to `foo` because `Bar` [1] is incompatible with `Foo` [2].

TypeScript

class Foo {};
class Bar {};
const foo: Foo = new Bar();
// No errors!

class Foo {
 declare private __nominal: void;
};
class Bar {
 declare private __nominal: void;
};
const foo: Foo = new Bar();
// Type 'Bar' is not assignable to type 'Foo'.
// Types have separate declarations of a private property '__nominal'.(2322)

Keys/Props Of Type

Flow

var props = {
 foo: 1,
 bar: 'two',
 baz: 'three',
}
type PropsType = typeof props;
type KeysOfProps = $Enum<PropsType>;
function getProp<T>(key: KeysOfProps): T {
 return props[key]
}

TypeScript

var props = {
 foo: 1,
 bar: 'two',
 baz: 'three',
}
type PropsType = typeof props
type KeysOfProps = keyof PropsType;
function getProp<T>(key: KeysOfProps): T {
 return props[key]
}

Records

Flow

type $Record<T, U> = {[key: $Enum<T>]: U}
type SomeRecord = $Record<{ a: number }, string>

TypeScript

type SomeRecord = Record<{ a: number }, string>

Lookup Types

Flow

type A = {
 thing: string
}
// when the property is a string constant use $PropertyType (i.e. you know it when typing)
type lookedUpThing = $PropertyType<A, 'thing'>
// when you want the property to be dynamic use $ElementType (since Flow 0.49)
function getProperty<T : Object, Key : string>(obj: T, key: Key): $ElementType<T, Key> {
 return obj[key];
}

TypeScript

type A = {
 thing: string
}
type lookedUpThing = A['thing']
// and...
function getProperty<T, K extends keyof T>(obj: T, key: K) {
 return obj[key]; // Inferred type is T[K]
}
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
 obj[key] = value;
}

Type-narrowing functions

Flow

function isNil(value: mixed): boolean %checks {
 return value == null;
}
const thing = null;
if (!isNil(thing)) {
 const another = thing.something;
}

Caveats

TypeScript

function isNil<T>(value: T | null): value is null {
 return value == null;
}
const thing: any = null;
if (!isNil(thing)) {
 const another = thing.something;
}

Getting the type of a function call return value

Flow

type Fn1 = <T>(T) => T;
type E = $Call<Fn1, number>;
declare var e: E; // E is number
(42: E); // OK

TypeScript

type fn1<T> = (a: T) => T;
type E = ReturnType<fn1<number>>;
var e: E; // E is number

Mapped Types / Foreach Property

Flow

type InputType = { hello: string };
type MappedType = $ObjMap<InputType, ()=>number>;

TypeScript

type InputType = { hello: string };
type MappedType = {
 [P in keyof InputType]: number;
};

Function and method overloading

Flow

declare function add(x: string, y: string): string;
declare function add(x: number, y: number): number;
declare class Adder {
 add(x: string, y: string): string;
 add(x: number, y: number): number;
}

declare function add(x: string, y: string): string;
declare function add(x: number, y: number): number;
function add(x, y) {
 return x + y;
}
add(1, 1); // Ok
add("1", "1"); // Ok
add(1, "1"); // Error

TypeScript

class Adder {
 add(x: string, y: string): string;
 add(x: number, y: number): number;
 add(x, y) {
 return x + y;
 }
}
function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x, y) {
 return x + y;
}

Read-only Types

Flow

type A = {
 +b: string
}
let a: A = { b: 'something' }
a.b = 'something-else'; // ERROR

TypeScript

type A = {
 readonly b: string
}
let a: A = { b: 'something' }
a.b = 'something-else'; // ERROR

"Impossible flow" type

Flow

function returnsImpossible() {
 throw new Error();
}
// type of returnsImpossible() is 'empty'

TypeScript

function returnsImpossible() {
 throw new Error();
}
// type of returnsImpossible() is 'never'

Difference types

Flow

type C = $Diff<{ a: string, b: number }, { a: string }>
// C is { b: number}

type Props = { name: string, age: number };
const props: Props = {name: 'Jon', age: 42};
const {age, ...otherProps} = props;
(otherProps: $Rest<Props, {|age: number|}>);
otherProps.age; // Error, since we removed it

Typescript

class A {
 a: string;
 b: number;
}
class B {
 a: string;
 c: boolean;
}
type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
// 
type C = Omit<A, B>;
// C is { b: number }

Same syntax

Object callable property

Flow

type F = {
 (): string
};
const f: F = () => "hello";
const hello: string = f();

type F = {
 (): string,
 [[call]]: (number) => string,
 [[call]](string): string
}
const f: F = (x?: number | string) => {
 return x ? x.toString() : '';
}

type MemoizedFactorialType = {
 cache: {
 [number]: number,
 },
 [[call]](number): number,
}
const factorial: MemoizedFactorialType = n => {
 if (!factorial.cache) {
 factorial.cache = {}
 }
 if (factorial.cache[n] !== undefined) {
 return factorial.cache[n]
 }
 factorial.cache[n] = n === 0 ? 1 : n * factorial(n - 1)
 return factorial.cache[n]
}

TypeScript

type F = {
 (): string;
}
const foo: F = () => "hello";
const bar: string = foo();

type F = {
 (): string,
 (x: number): string,
 (x: string): string
}
const f: F = (x?: number | string) => {
 return x ? x.toString() : '';
}

type MemoizedFactorialType = {
 cache?: {
 [n: number]: number,
 },
 (n: number): number,
}
const factorial: MemoizedFactorialType = n => {
 if (!factorial.cache) {
 factorial.cache = {}
 }
 else if (factorial.cache[n] !== undefined) {
 return factorial.cache[n]
 }
 factorial.cache[n] = n === 0 ? 1 : n * factorial(n - 1)
 return factorial.cache[n]
}

optional parameters

Flow and TypeScript

function(a?: string) {}

call-time generic parameters

const set = new Set<string>();

function makeTgenerator<T>() {
 return function(next: () => T) {
 const something = next();
 return something;
 }
}
const usage = makeTgenerator<string>()
// 'usage' is of type: (next: () => string) => string

Typing pure JS files (i.e. without transpilation)

Flow

const f = (x /*: number */, y /*: number */) /*: number */ => x + y

TypeScript

// JSDoc type syntax
/** @type {function(number, number): number} */
const f = (x, y) => x + y
// equivalent TypeScript type syntax
/** @type {(x: number, y: number) => number} */

/**
 * @param {string} input
 * @returns {string} result
 *//**
 * @param {number} input
 * @returns {string} result
 */
function notSupported(input) { /* omit */ }

/** @type {{
 (): void;
 (code: 0): void;
 (code: 1, msg: string): void
 }} */
const functionOverloads = (
 /** @type {0 | 1} */ code = 0,
 /** @type {string | undefined} */ msg = code === 0 ? undefined : ""
) => { /* omit */ }

TypeScript-only concepts

Declarable arbitrary this in functions (outside of objects)

function something(this: { hello: string }, firstArg: string) {
 return this.hello + firstArg;
}

Private and Public properties in classes

class SomeClass {
 constructor(public prop: string, private prop2: string) {
 // transpiles to:
 // this.prop = prop;
 // this.prop2 = prop2;
 }
 private prop3: string;
}

Non-null assertion operator

// Compiled with --strictNullChecks
function validateEntity(e?: Entity) {
 // Throw exception if e is null or invalid entity
}
function processEntity(e?: Entity) {
 validateEntity(e);
 let s = e!.name; // Assert that e is non-null and access name
}

Conditional Typing

type XorY<T, U> = T extends U ? X : Y;

type Exclude<T, U> = T extends U ? never : T;
/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never;
/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T extends null | undefined ? never : T;
/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any[]) => any> =
 T extends (...args: any[]) => infer R ? R : any;

Mapped Type Modifiers

type Mutable<T> = {
 -readonly [P in keyof T]: T[P]
}
interface Foo {
 readonly abc: number;
}
// 'abc' is no longer read-only.
type TotallyMutableFoo = Mutable<Foo>

Helper type modifiers

Flow-only concepts

Inferred existential types

Array<*>

Variance

function getLength(o: {+p: ?string}): number {
 return o.p ? o.p.length : 0;
}

Opaque Type Alias

opaque type Alias = Type;
opaque type Alias: SuperType = Type; // with subtyping constrains

export opaque type Age: number = number;
function newAge(age: number): Age {
 return age; // ok within same file, not ok outside defining file
}
function incAge(age: Age): number {
 return age + 1; // ok
}

type Opaque<T, U> = U & { readonly __TYPE__: T }
type Age = Opaque<'age', number>
function newAge(age: number): Age {
 return age; // not ok
}
function incAge(age: Age): number {
 return age + 1; // ok
}

Object type spread

type Foo = {| foo: string, bar: string |}
type Bar = {| bar: number |}
type FooBarIntersection = Foo & Bar
type FooBarSpread = {| ...Foo, ...Bar |}
const fooBarInterect: FooBarIntersection = { foo: '123', bar: 12 } // not ok
const fooBarString: FooBarSpread = { foo: '123', bar: 'string' } // not ok
const fooBar: FooBarSpread = { foo: '123', bar: 12 } // ok

Useful References