JSON → TypeScript 変換

機能

JSON → TypeScript 変換ツールは、API レスポンスや設定ファイルなどの JSON サンプルを読み取り、それを表す TypeScript のインターフェースを書き出します。フィールドを 1 つずつ手で書く代わりに、実際のレスポンスを 1 つ貼り付ければ、fetch の結果や Redux の状態、テストデータにそのまま使える型が得られます。

生成器は最初の値だけでなく、すべての値を調べます。数値は number、テキストは string になり、入れ子のオブジェクトには専用のインターフェースが作られます。配列の要素はまとめられるため、一部の要素にしかないフィールドは省略可能に、時々 null になるフィールドは null 許容として型付けされます。

使い方

1. JSON を入力欄に貼り付けるか、.json ファイルをアップロードするか、サンプル をクリックします。
2. ルート型の名前を設定し、スタイルを選びます。interface か type、null を | null にするか省略可能にするか、readonly プロパティ、各宣言に export を付けるかどうかです。
3. TypeScript をコピーするか、.ts ファイルとしてダウンロードします。

不正な JSON は問題のある行と列とともに表示されるので、すぐにサンプルを直せます。

例

この JSON は：

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

次の宣言になります：

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

ヒント

• 1 つのサンプルからは、そこに含まれる内容しかわかりません。文字列にも null にもなるフィールドなら両方の例を含めるか、複数のサンプルを配列にまとめてマージさせましょう。
• first-name のように識別子として使えないフィールド名は引用符で囲まれるので、出力は必ずコンパイルできます。
• 結果は出発点です。サンプル以上のことがわかっているなら、文字列フィールドをリテラルのユニオン型や Date に絞り込んでください。
• Go が必要ですか？JSON → Go 変換は同じ推論を使って json タグ付きの構造体を書き出します。