ccnokes / ts-to-flow

Incomplete guide of going from TypeScript to Flow

Converting common TS constructs to Flow

A very incomplete guide of going from TypeScript to Flow. Not sure why you would do this unless you work at Meta 😅 . Otherwise, you probably want to go from flow to TS.

Try the two here:

• Flow playground
• TS playground

Another (out of date) reference: https://github.com/niieani/typescript-vs-flowtype

All examples show TS first, then Flow.

General

typeof

Usage is same in the two.

keyof

type Obj = {
  a: 123
}
type keys = keyof Obj;

type Obj = {
  a: 123
}
$Keys<Obj>

nullable/maybe types

This is actually sort of a sore spot in TS. If you have strictNullChecks on (recommended), it can make sense to have a global type that looks like this:

type Nullable<T> = T | undefined | null;

In flow, this concept is built-in with the ? prefix operator.

?string

Partial

In flow, $Shape is equivalent to Partial.

type Obj = { id: number, name: string };
Partial<Obj>

type Obj = { id: number, name: string };
$Shape<Obj>

Built-ins

Record

Record<string, string | null>

There's no built-in for this in flow.

{[key: string]: ?string}

React

ComponentProps

React.ComponentProps<typeof MyComponent>['propName']

React.ElementProps<typeof MyComponent>['propName']