FlowからTypeScript型への変換 — Numio

こんなときに使えます

• Flow のコードベースをファイル単位で TypeScript に移行しており、各モジュールの最初の変換を済ませたい場合。
• 古い React プロジェクトにある Flow の型付きスニペットを、TypeScript のコードベースに貼り付ける必要がある場合。

使い方

1. Flow パネルに Flow のコードを貼り付けます。
2. コードは /api/flow-to-typescript に送信され、サーバー上で flow-to-ts により変換されます。設定項目はありません。
3. TypeScript をコピーして .ts または .tsx として保存し、tsc を実行して変換しきれなかった箇所を修正します。

// @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;

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

仕様と制限

入力は変換のためにサーバーのルート（/api/flow-to-typescript）に送信されます。ブラウザ内だけで処理されるわけではありません。Next.js の API ルートが受け付けるリクエストボディは、デフォルトで 1 MB までです。

TypeScript には厳密なオブジェクトがないため、厳密なオブジェクト型 {| |} は厳密さを失います。+prop は readonly になります。

$ReadOnly や $Keys などの Flow のユーティリティ型は名前がそのまま残り、npm パッケージ utility-types からインポートされるため、そのパッケージをインストールする必要があります。

// @flow プラグマは削除され、コードは出力し直されます。Node などの React の型インポートは書かれたまま残るため、名前（例: ReactNode）は自分で変更してください。

FAQ

関連ツール

仕様を確認する

• flow-to-ts on GitHub
• Flow documentation