変換 JSON → TypeScript
JSON から TypeScript の型を作る
JSON サンプルから TypeScript の interface / type を生成する方法です。API レスポンスの型定義に使えます。
解説
JSON サンプルから TypeScript の型定義を作る変換です。プリミティブ値は対応する TS 型に、配列は要素型の配列に、オブジェクトは無名 type または interface にします。 単一サンプル由来の制約があります。string か string | null かを判別できない、配列の要素型は最初の 1 件で決まるので union を取りこぼす、数値の min/max は型に表現できない、の 3 点です。本格的には OpenAPI スキーマからの型生成 (openapi-typescript) が確実です。
サンプル入力(JSON)
{
"id": 42,
"name": "alice",
"isAdmin": false,
"tags": ["editor", "admin"],
"address": { "city": "Tokyo", "zip": "150-0001" }
} サンプル出力(TypeScript)
interface User {
id: number;
name: string;
isAdmin: boolean;
tags: string[];
address: {
city: string;
zip: string;
};
} 使うときのコツ
- · 複数サンプルを取って union 型で結合すると、欠損キーや null 可能性を取り込める
- · API スキーマ(OpenAPI / GraphQL)があるならそちらから型生成(openapi-typescript / graphql-codegen)
- · 数値が ID か量かの区別は型から不能。branded type(type UserId = number & { readonly brand: unique symbol })で誤用防止
よくある質問
▶ interface と type のどちらで出すべき?
プロジェクトの慣習次第です。interface は宣言マージ可能、type は union やリテラル型に強い。チームで統一されていればどちらでも構いません。
▶ オプショナル(?)はどう判定?
単一サンプルでは判定不可能なので、すべて必須として出力します。複数サンプル間で欠損があるキーをオプショナルにする方針が安全です。
▶ ネストしたオブジェクトを別 interface に分けたい
address のような頻出ネストは別 interface に切り出すと再利用しやすくなります。本ツールではインラインで生成するので、生成後に手で切り出してください。
▶ 数値の Date は string になりますか?
JSON 上の "2025-01-01T00:00:00Z" はパース時には string です。Date 型に変換したい場合は zod や自前のパース関数を経由します。型レベルでは string のままが正確です。
▶ API レスポンスの型生成にはどの方法が安全?
OpenAPI スキーマがあれば openapi-typescript、GraphQL なら graphql-codegen が確実です。サーバー実装と型がリンクするので、変更を見逃しにくくなります。
▶ ライブラリで自動化したい
quicktype(quicktype.io)が広く使われています。CLI / Web / VS Code 拡張があり、Python・Go 等への変換も対応します。
関連ツール
JSON フォーマッタ
JSON を整形・圧縮・キーソートします。