JSONからFlow Typesへの変換ツール — Numio

JSON サンプルから、// @flow で始まる Flow の型エイリアスを生成します。ネストしたオブジェクトごとにエクスポートされた型が作られ、配列の一部の要素にしかないキーは ? で省略可能になります。

Flow をまだ使っている React や React Native のコードベースで API レスポンスに型を付ける。

JSON

Flow

こんなときに使えます

Flow をまだ使っている React や React Native のコードベースで API レスポンスに型を付ける。
Flow でチェックされるテストスイートのフィクスチャやモックデータの型を書く。

使い方

JSON オブジェクトをエディターに貼り付けます。
設定を開いて prefix（既定は I）と Root Name（既定は RootObject）を変更します。ルート型は IRootObject になり、ネストした型にも同じ接頭辞が付きます。
エクスポートされた型を、// @flow ヘッダーを残した .js ファイルにコピーします。

JSON 入力

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": null,
  "active": true,
  "score": 98.5,
  "tags": ["admin", "dev"],
  "address": { "city": "London", "postCode": "NW1" }
}

Flow 型

// @flow
export type IRootObject = {
  id: number
  name: string
  email: null
  active: boolean
  score: number
  tags: string[]
  address: IAddress
}
export type IAddress = {
  city: string
  postCode: string
}

仕様と制限

ブラウザ内で json-ts ライブラリにより実行され、結果は Prettier で整形されます。何もアップロードされません。

Flow には名前空間がないため、このページの設定は prefix と Root Name だけです。出力は常に最上位の export type 宣言です。

null 値は null 型、空配列は any[] になります。値を持ちうるフィールドは ?string のような maybe 型に変更してください。

出力は inexact なオブジェクト型で、$ReadOnly も使いません。プロジェクトで必要なら {| |} や読み取り専用のラッパーを追加してください。

FAQ

省略可能なフィールドはどう判定されますか？

オブジェクトの配列からだけ判定します。一部の要素にしかないキーが giftWrap?: boolean のように省略可能になります。単一のオブジェクトには比較するサンプルがないため、最上位のキーは省略可能になりません。

ルートが配列の JSON も変換できますか？

できます。ルートは export type IRootObject = IRootObjectItem[] のような配列エイリアスになり、要素型は全要素のキーをマージし、欠けているキーを省略可能にします。

型が混在する配列にも対応していますか？

はい。["a", 2] のようなフラットな配列は (string | number)[] になります。ネストした配列は any[] になります。

仕様を確認する

Flow docs: Objects