JSON から TypeScript インターフェースへ

Q: オプショナルなプロパティはどのように判定されますか？

最上位の値や入れ子のキーがオブジェクトの配列の場合、一部のオブジェクトにしか存在しないキーに `?` が付きます。

JSON のサンプルから TypeScript の interface や type エイリアスを生成します。オプショナルキー、null のユニオン、配列からの入れ子の型も推論。無料で安全です。

JSON 入力

ファイルを開く

ルート型の名前

出力スタイル

TypeScript コード

一部の配列要素に存在しないキーは省略可能 (?) に、null は "| null" に、常に null の値は unknown になります。

すべてブラウザ内で実行されます。データがアップロードされることはありません。

JSON から TypeScriptとは？

API レスポンスや設定ファイルのサンプルを貼り付けると、そのまま使える TypeScript の interface（または type）宣言が得られます。入れ子のオブジェクトは別々のエクスポート型になり、一部の配列要素にないキーはオプショナルに、null の値はユニオン型になります。

JSON から TypeScriptの使い方

JSON 入力 に JSON のサンプルを貼り付けます（サンプルを読み込む や ファイルを開く も使えます）。
ルート型の名前 を設定します（既定は Root）。
出力スタイル を interface か type エイリアス から選びます。
生成された TypeScript のコードをコピーするか、ダウンロード してファイルとして保存します。

例

入力

{"id":1,"name":"A","tags":["x"]}

出力

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

JSON から TypeScriptを使うべき場面

fetch のレスポンス、フィクスチャ、設定ファイルに素早く型を付けたいときに向いています。1 つのサンプルですべてのケースが分かるわけではありません。文字列の列挙型、オブジェクト形状のユニオン、日付文字列は単なる string や統合された型のままなので、結果を確認して調整するか、契約が重要なら JSON Schema ベースのジェネレーターを使ってください。

JSON から TypeScriptの仕組み

サンプルを再帰的にたどり、各位置で見つかった型を集めます。オブジェクトの配列は 1 つの型にまとめられ、一部の要素にないキーはオプショナル、どこかで null になるキーは null 許容になります。整数と小数が混在する場合は浮動小数点型になり、それ以外で型が混在する場合は動的な型にフォールバックします。入れ子のオブジェクトは名前付きの型になり（キーのパスカルケースで、配列のキーは単数形にします：orders → Order）、名前が衝突した場合は数字の接尾辞が付きます。TypeScript の出力では、整数と小数は number、文字列は string、真偽値は boolean、配列は T[]、null 許容は T | null、動的な値は unknown に対応します。識別子として使えないキーは引用符で囲まれます（"first-name": string）。