Disclaimer

Differences in usage and usability

Differences in syntax

bounded polymorphism

Flow

functionfooGood<T:{x:number}>(obj: T): T{console.log(Math.abs(obj.x));returnobj;}

TypeScript

functionfooGood<Textends{x:number}>(obj:T):T{console.log(Math.abs(obj.x));returnobj;}

Reference

maybe & nullable type

Flow

leta: ?string// equivalent to:leta:string|null|void

TypeScript

leta:string|null|undefined

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

classA{foo?:string;}

type casting

Flow

(1+1 :number);

TypeScript

(1+1)asnumber;// 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 stringdeclareexportvarclassName:string;

TypeScript

declare module"*.css"{exportconstclassName:string;}

Reference

Exact/Partial Object Types

Flow

typeExactUser={|name:string,age:number|};typeUser={name:string,age:number};typeOptionalUser=$Shape<User>;// all properties become optional

TypeScript

typeExactUser={name:string,age:number};typeUser={name:string,age:number,[otherProperty:string]:any};typeOptionalUser=Partial<ExactUser>;// all properties become optional

Reference

Importing types

Flow

importtype{UserID,User}from"./User.js";// equivalent:import{typeUserID,typeUser}from"./User.js";

TypeScript

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

typeof

Flow

importtypeof{jimiguitarasGuitarT}from"./User";// ORimport{typeofjimiguitar}from"./User.js";typeGuitarT=jimiguitar;// OR (below also works in TypeScript)import{jimiguitar}from"./User.js";typeGuitarT=typeofjimiguitar;

TypeScript

import{jimiguitar}from"./User";typeGuitarT=typeofjimiguitar;

Restrictive type

Flow

functionstringifyNum(num:number){// Do stuff}functionstringify(value:mixed){if(typeofvalue==='string'){return''+value;// Works!}if(typeofvalue==='number'){returnstringifyNum(value);// Works!}return'';}

Typescript

functionstringifyNum(num:number){// Do stuff}functionstringify(value:unknown){if(typeofvalue==='string'){return''+value;// Works!}if(typeofvalue==='number'){returnstringifyNum(value);// Works!}return'';}

Accessing the type of a Class

Flow

classTest{};typeTestType=typeofTest;constinstance=newTest();typeTestTypeFromInstance=Class<typeofinstance>;

TypeScript

classTest{};typeTestType=typeofTest;

Nominal typing

Flow

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

TypeScript

classFoo{};classBar{};constfoo:Foo=newBar();// No errors!

classFoo{declareprivate__nominal:void;};classBar{declareprivate__nominal:void;};constfoo:Foo=newBar();// Type 'Bar' is not assignable to type 'Foo'.// Types have separate declarations of a private property '__nominal'.(2322)

Keys/Props Of Type

Flow

varprops={foo:1,bar:'two',baz:'three',}typePropsType=typeofprops;typeKeysOfProps=$Enum<PropsType>;functiongetProp<T>(key: KeysOfProps): T{returnprops[key]}

TypeScript

varprops={foo:1,bar:'two',baz:'three',}typePropsType=typeofpropstypeKeysOfProps=keyofPropsType;functiongetProp<T>(key:KeysOfProps):T{returnprops[key]}

Records

Flow

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

TypeScript

typeSomeRecord=Record<{a:number},string>

Lookup Types

Flow

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

TypeScript

typeA={thing:string}typelookedUpThing=A['thing']// and...functiongetProperty<T,KextendskeyofT>(obj:T,key:K){returnobj[key];// Inferred type is T[K]}functionsetProperty<T,KextendskeyofT>(obj:T,key:K,value:T[K]){obj[key]=value;}

Type-narrowing functions

Flow

functionisNil(value:mixed):boolean%checks{returnvalue==null;}constthing=null;if(!isNil(thing)){constanother=thing.something;}

Caveats

TypeScript

functionisNil<T>(value:T|null):value isnull{returnvalue==null;}constthing:any=null;if(!isNil(thing)){constanother=thing.something;}

Getting the type of a function call return value

Flow

typeFn1=<T>(T) =>T;typeE=$Call<Fn1,number>;declarevar e:E;// E is number(42:E);// OK

TypeScript

typefn1<T>=(a:T)=>T;typeE=ReturnType<fn1<number>>;vare:E;// E is number

Mapped Types / Foreach Property

Flow

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

TypeScript

typeInputType={hello:string};typeMappedType={[PinkeyofInputType]:number;};

Function and method overloading

Flow

declarefunctionadd(x:string,y:string):string;declarefunctionadd(x:number,y:number):number;declareclassAdder{add(x:string,y:string):string;add(x:number,y:number):number;}

declarefunctionadd(x:string,y:string):string;declarefunctionadd(x:number,y:number):number;functionadd(x,y){returnx+y;}add(1,1);// Okadd("1","1");// Okadd(1,"1");// Error

TypeScript

classAdder{add(x:string,y:string):string;add(x:number,y:number):number;add(x,y){returnx+y;}}functionadd(x:string,y:string):string;functionadd(x:number,y:number):number;functionadd(x,y){returnx+y;}

Read-only Types

Flow

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

TypeScript

typeA={readonlyb:string}leta:A={b:'something'}a.b='something-else';// ERROR

"Impossible flow" type

Flow

functionreturnsImpossible(){thrownewError();}// type of returnsImpossible() is 'empty'

TypeScript

functionreturnsImpossible(){thrownewError();}// type of returnsImpossible() is 'never'

Difference types

Flow

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

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

Typescript

classA{a:string;b:number;}classB{a:string;c:boolean;}typeOmit<T,U>=Pick<T,Exclude<keyofT,keyofU>>;//typeC=Omit<A,B>;// C is { b: number }

Same syntax

Object callable property

Flow

typeF={():string};constf:F=()=>"hello";consthello:string=f();

typeF={():string,[[call]]:(number)=>string,[[call]](string):string}constf:F=(x?:number|string)=>{returnx ?x.toString() :'';}

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

TypeScript

typeF={():string;}constfoo:F=()=>"hello";constbar:string=foo();

typeF={():string,(x:number):string,(x:string):string}constf:F=(x?:number|string)=>{returnx ?x.toString() :'';}

typeMemoizedFactorialType={cache?:{[n:number]:number,},(n:number):number,}constfactorial:MemoizedFactorialType=n=>{if(!factorial.cache){factorial.cache={}}elseif(factorial.cache[n]!==undefined){returnfactorial.cache[n]}factorial.cache[n]=n===0 ?1 :n*factorial(n-1)returnfactorial.cache[n]}

optional parameters

Flow and TypeScript

function(a?:string){}

call-time generic parameters

constset=newSet<string>();

functionmakeTgenerator<T>(){returnfunction(next:()=>T){constsomething=next();returnsomething;}}constusage=makeTgenerator<string>()// 'usage' is of type: (next: () => string) => string

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

Flow

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

TypeScript

// JSDoc type syntax/**@type {function(number, number): number} */constf=(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 */functionnotSupported(input){/* omit */}

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

TypeScript-only concepts

Declarable arbitrarythis in functions (outside of objects)

functionsomething(this:{hello:string},firstArg:string){returnthis.hello+firstArg;}

Private and Public properties in classes

classSomeClass{constructor(publicprop:string,privateprop2:string){// transpiles to:// this.prop = prop;// this.prop2 = prop2;}privateprop3:string;}

Non-null assertion operator

// Compiled with --strictNullChecksfunctionvalidateEntity(e?:Entity){// Throw exception if e is null or invalid entity}functionprocessEntity(e?:Entity){validateEntity(e);lets=e!.name;// Assert that e is non-null and access name}

Conditional Typing

typeXorY<T,U>=TextendsU ?X :Y;

typeExclude<T,U>=TextendsU ?never :T;/** * Extract from T those types that are assignable to U */typeExtract<T,U>=TextendsU ?T :never;/** * Exclude null and undefined from T */typeNonNullable<T>=Textendsnull|undefined ?never :T;/** * Obtain the return type of a function type */typeReturnType<Textends(...args:any[])=>any>=Textends(...args:any[])=> inferR ?R :any;

Mapped Type Modifiers

typeMutable<T>={-readonly[PinkeyofT]:T[P]}interfaceFoo{readonlyabc:number;}// 'abc' is no longer read-only.typeTotallyMutableFoo=Mutable<Foo>

Helper type modifiers

Flow-only concepts

Inferred existential types

Array<*>

Variance

functiongetLength(o:{+p: ?string}):number{returno.p ?o.p.length :0;}

Opaque Type Alias

opaquetypeAlias=Type;opaquetypeAlias:SuperType=Type;// with subtyping constrains

exportopaquetypeAge:number=number;functionnewAge(age:number):Age{returnage;// ok within same file, not ok outside defining file}functionincAge(age:Age):number{returnage+1;// ok}

typeOpaque<T,U>=U&{readonly__TYPE__:T}typeAge=Opaque<'age',number>functionnewAge(age:number):Age{returnage;// not ok}functionincAge(age:Age):number{returnage+1;// ok}

Object type spread

typeFoo={|foo:string,bar:string|}typeBar={|bar:number|}typeFooBarIntersection=Foo&BartypeFooBarSpread={| ...Foo, ...Bar|}constfooBarInterect:FooBarIntersection={foo:'123',bar:12}// not okconstfooBarString:FooBarSpread={foo:'123',bar:'string'}// not okconstfooBar:FooBarSpread={foo:'123',bar:12}// ok

Useful References