Skip to content
Numio

Flow to TypeScript Types Conversion — Numio

Converts Flow-typed code to TypeScript with Khan Academy's flow-to-ts. Maybe types (?T) become T | null | undefined, exact objects become plain object types, and $ReadOnlyArray becomes ReadonlyArray.

You are migrating a Flow codebase to TypeScript file by file and want a first pass for each module.

Flow

TypeScript

When to use it

  • You are migrating a Flow codebase to TypeScript file by file and want a first pass for each module.
  • A Flow-typed snippet from an older React project needs to be pasted into a TypeScript codebase.

How to use

  1. Paste Flow code into the Flow panel.
  2. It is posted to /api/flow-to-typescript and converted with flow-to-ts on the server; there are no settings.
  3. Copy the TypeScript, save it as .ts or .tsx, and run tsc to fix what the conversion could not translate.

Flow

// @flow
import type { Node } from 'react';

export type User = {|
  +id: number,
  name: ?string,
  roles: $ReadOnlyArray<string>,
|};

export function greet(user: User): string {
  return `Hi ${user.name ?? 'guest'}`;
}

export const render = (title: string): Node => null;

TypeScript

import type { Node } from "react"
export type User = {
  readonly id: number
  name: string | null | undefined
  roles: ReadonlyArray<string>
}
export function greet(user: User): string {
  return `Hi ${user.name ?? "guest"}`
}
export const render = (title: string): Node => null

Details and limitations

The page sends your input to a server route (/api/flow-to-typescript) for conversion; it is not processed only in the browser. Next.js API routes accept request bodies up to 1 MB by default.

Exact object types {| |} lose their exactness, because TypeScript has no exact objects, and +prop becomes readonly.

Flow utility types such as $ReadOnly and $Keys are kept by name and imported from the utility-types npm package, which you then need to install.

The // @flow pragma is removed and the code is reprinted. React type imports such as Node are kept as written, so rename them (e.g. ReactNode) yourself.

FAQ

How are maybe types converted?

name: ?string becomes name: string | null | undefined. An optional property (name?: T) stays optional.

Does it convert JSX files?

Yes. JSX is kept, so save the result as .tsx.

Do I get a .d.ts instead of full code?

Not on this page. Flow to TypeScript Declaration uses the same server route with declarationOnly to emit only declarations.

Specifications and references