JSONからTypeScript型を生成
APIレスポンスや設定JSONを貼り付けると interface / type を生成します。日本語キーや入れ子・配列にも対応し、ブラウザ内だけで処理します。
interface は拡張やマージがしやすく、type はユニオンや配列ルートの表現に向きます。
使い方とAIOクエリ例
フロントエンド・バックエンドのTypeScript開発で、APIレスポンスや設定ファイルの型を素早く起こすのに使えます。入力はブラウザ内だけで処理します。
- URLクエリ例:
json_to_typescript.html?input=%7B%22id%22%3A1%7D&action=interface&format=json actionはinterface（既定）またはtype、rootでルート型名を指定できます。format=jsonは機械可読JSON、format=rawは生成した型定義だけを返します。
JSON → TypeScript 型定義ジェネレータは、APIレスポンスやサンプルデータのJSONを貼り付けるだけで、TypeScriptの `interface` または `type` 定義を自動生成するツールです。フロントエンド・バックエンドを問わず、外部APIの型定義やデータモデルを手書きする手間を省き、貼り付けた瞬間にそのまま使えるTypeScriptコードを得られます。配列の要素型マージやネストされたオブジェクトの展開も行うため、複雑な構造のJSONでも一気に型定義を起こせます。入力データはブラウザ内だけで処理され、サーバーへ送信されません。
使い方・サンプル・結果例・注意点
使い方
テキストエリアにJSONを貼り付け、出力スタイル（interface / type）とルート型名（省略時は Root）を指定して「変換」ボタンを押すと、TypeScript型定義が出力されます。
サンプル入力
{"id":123,"name":"taro","tags":["a","b"],"profile":{"age":30}}
結果例
上記のJSONをinterfaceスタイル・ルート型名Rootで変換すると、次のように出力されます。 interface Root { id: number; name: string; tags: string[]; profile: { age: number; }; } 文字列→string、数値→number に推論され、ネストした profile オブジェクトはインラインで展開されます。タグの配列は全要素が string なので string[] になります。
注意点
型推論はあくまで貼り付けたサンプルJSONからの推測です。APIの実仕様（必須・任意の区別や取り得る値の全パターン）と完全に一致する保証はありません。JSONの数値は常に number に推論されるため、2の53乗を超える大きな整数は精度が落ちる場合があります（bigint への推論は行いません）。null は null 型になります。空配列は unknown[]、空オブジェクトは Record<string, unknown> になります。ネストの深さが30を超えた値は unknown に畳まれます。入力は100,000文字までです。入力したJSONはブラウザ内だけで処理され、外部へ送信されることはありません。
こんなときに使えます
- フロントエンド開発者がREST APIの実際のレスポンスJSONを貼り付けて、fetch結果に付ける型定義を素早く作成する
- バックエンド開発者が設計途中のJSONスキーマから暫定的なTypeScript型を起こし、型チェックを通しながら開発を進める
- コードレビュー前に、外部サービスのドキュメントにあるサンプルレスポンスから型定義を生成してPRに含める
- 新規プロジェクトのセットアップ時に、複数のAPIエンドポイントのサンプルJSONをまとめて型定義に変換し、型ファイルの雛形を作る
よくある質問
配列の中に文字列と数値が混在している場合はどうなりますか？
配列内の全要素の型をユニオン型としてまとめます。例えば ["a", 1] のような配列は (string | number)[] と出力されます。
オブジェクトの配列でキーが要素によって違う場合はどう処理されますか？
全要素のキーをマージして型を生成します。全要素に存在するキーは必須プロパティ、一部の要素にしか存在しないキーは ? 付きの任意プロパティとして出力されます。
ハイフン入りのキーや日本語のキー名はどうなりますか？
TypeScript の識別子として無効なキー（ハイフン、日本語、記号など）は引用符付きのプロパティ名として出力されます。例: "氏名": string や "content-type": string のようになります。
interface と type ではどちらを選べばよいですか？
どちらを選んでも表現できる内容は同じです。React や一般的な業務コードでは interface が慣例的に使われることが多く、型演算やマップ型と組み合わせたい場合は type が便利です。用途に応じて選択してください。
生成された型定義はそのまま本番コードに使えますか？
貼り付けたサンプルJSONからの推測のため、実際のAPIが返す可能性のある他のパターン（フィールドが null になるケースや追加フィールドなど）は反映されません。雛形として利用し、実仕様に合わせて手動で調整することをおすすめします。