TypeScriptからFlow型への変換 — Numio
flowgen を使って TypeScript の型宣言を Flow の型に変換します。readonly は + の変性マーカーに、エクスポートされた関数とクラスは "declare export" に、enum は読み取り専用の厳密なオブジェクトになります。
TypeScript ライブラリを公開しており、Flow を使う利用者向けに Flow の定義も配布したい場合。
こんなときに使えます
- TypeScript ライブラリを公開しており、Flow を使う利用者向けに Flow の定義も配布したい場合。
- Flow のコードベースが .d.ts の型しかないパッケージに依存しており、出発点となる libdef が必要な場合。
使い方
- TypeScript パネルに TypeScript の宣言（interface、type、declare 文、enum）か、実装コードを含むモジュールを貼り付けます。
- コードは /api/typescript-to-flow に送信されます。関数本体や初期化子を含むコードは、まず TypeScript コンパイラーで .d.ts に縮小され、その後 flowgen が変換して整形します。
- Flow の出力をコピーして flow-typed フォルダーか .js.flow ファイルに置き、flow を実行して確認します。
TypeScript
export type Theme = "light" | "dark";
export interface ButtonProps {
label: string;
theme?: Theme;
readonly disabled: boolean;
onClick(event: MouseEvent): void;
}
export declare function render(props: ButtonProps): string;
export enum Size { Small, Large }Flow
export type Theme = "light" | "dark";
export interface ButtonProps {
label: string;
theme?: Theme;
+disabled: boolean;
onClick(event: MouseEvent): void;
}
declare export function render(props: ButtonProps): string;
declare export var Size: {|
+Small: 0, // 0
+Large: 1, // 1
|};仕様と制限
入力は変換のためにサーバーのルート（/api/typescript-to-flow）に送信されます。ブラウザ内だけで処理されるわけではありません。Next.js の API ルートが受け付けるリクエストボディは、デフォルトで 1 MB までです。
実装コードはまず宣言にコンパイルされるため、型付きの API だけが残ります。本体は消え、推論された戻り値の型が補われ、エクスポートされておらずどのエクスポートからも使われない値は削除されます。
オブジェクトの型エイリアスは "..." で終わる非厳密な Flow オブジェクトになり、interface は interface のままです。
数値の enum は、読み取り専用のリテラル値を持つ厳密なオブジェクトとして宣言されます（例: +Small: 0）。
FAQ
readonly プロパティはどう変換されますか？
readonly disabled: boolean は、Flow の共変（読み取り専用）プロパティマーカーを使った +disabled: boolean になります。
実装を含む .ts ファイル全体を貼り付けられますか？
はい。サーバーが先に宣言を出力するため、型注釈のないアロー関数には推論された型が付きます（例: declare export var greet: (u: User) => string）。構文エラーは変換されずに報告されます。
TypeScript の enum には対応していますか？
はい。declare export var Name: {| +Member: value |} として出力されます。Flow の enum は生成されません。