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;

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;}

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}

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

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

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;}

Useful References