FlowからVanilla JavaScriptへの変換 — Numio

こんなときに使えます

• プロジェクトから Flow を外す作業中で、TypeScript に移行するかを決める前に、まずプレーンな JavaScript がほしい場合。
• Flow の型が付いたスニペットを、ブラウザーのコンソールや codepen など標準の JavaScript しか受け付けない場所に貼り付ける必要がある場合。

使い方

1. Flow パネルに Flow の注釈付きコード（// @flow ヘッダーの有無は問いません）を貼り付けます。
2. コードは /api/flow-to-javascript に送信され、recast が Flow パーサーで解析し、Babel が型を取り除きます。
3. 出力パネルから JavaScript をコピーします。

// @flow
import type { Store } from './store';
import { createStore } from './store';

type State = { count: number };

export function first<T>(items: Array<T>): ?T {
  return items.length ? items[0] : null;
}

const store: Store<State> = createStore(({ count: 0 }: State));

export default store;

import { createStore } from "./store"

export function first(items) {
  return items.length ? items[0] : null
}

const store = createStore({
  count: 0,
})

export default store

仕様と制限

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

取り除かれるのは型だけです。JSX、??、クラスフィールドなどのモダンな構文はトランスパイルされません。

結果は Prettier で整形し直される（ダブルクォート、セミコロンなし）ため、元のスタイルは保持されません。({ count: 0 }: State) のような型キャストでは余分な括弧も消えます。

削除される型宣言に付いている // @flow コメントは、一緒に削除されます。

FAQ

関連ツール

仕様を確認する

• @babel/plugin-transform-flow-strip-types