🔷 JSON→TypeScript型定義生成
interface RootObject {
id: number;
name: string;
active: boolean;
tags: string[];
address: {
city: string;
zip: string;
};
}JSONデータを貼り付けるだけで、対応するTypeScriptのinterface型定義を自動生成できるツールです。ネストされたオブジェクトや配列にも対応しています。APIレスポンスの型を素早く作成したいときや、既存のJSONデータから型定義を起こしたいときに便利です。
使い方
- 生成するinterfaceの名前を入力します(任意)。
- 型定義を生成したいJSONデータを入力欄に貼り付けます。
- TypeScriptのinterfaceが自動的に生成されるので、「コピー」でコピーして使用します。
計算の仕組み
このツールは、JSONの例からTypeScriptの型定義（interface）を自動で作ります。APIのレスポンスの型を手で書く手間を減らせます。 値ごとに次のように型を決めます。 ・文字列 → string、数値 → number、true/false → boolean、null → null ・オブジェクト → 各キーの型を並べた入れ子の型 ・配列 → 要素の型に[]を付けた型。要素の型が複数あれば (A | B)[] のようなユニオン型、空の配列は unknown[] キーが「first-name」のようにJavaScriptの名前として使えない文字を含む場合は、"first-name" のように引用符で囲みます。一番外側がオブジェクトならinterface、それ以外（配列など）ならtypeとして出力します。
計算例
入力 {"id": 1, "name": "Alice", "active": true, "tags": ["admin", "user"], "address": {"city": "Tokyo", "zip": "100-0001"}} 出力 interface RootObject { id: number; name: string; active: boolean; tags: string[]; address: { city: string; zip: string; }; }
使用上の注意
- 型は入力した1つの例だけから作ります。例に出てこないキーや、nullになることもある値は反映されないため、必要に応じて「?」（省略可能）や「| null」を追加してください。
- 入れ子のオブジェクトは、別のinterfaceに分けずにその場に書きます。再利用したい場合は、手で名前を付けて分けてください。
- 日付の文字列もstringになります。Date型として扱いたい場合は、受け取った後で変換が必要です。
よくある質問
配列の要素の型が混在している場合はどうなりますか?
配列内の要素の型が複数種類ある場合は、ユニオン型(例: (string | number)[])として生成されます。
生成された型はそのまま正確ですか?
JSONの値から推測した基本的な型定義です。実際のAPIでは同じフィールドが場合によってnullやundefinedになることもあるため、必要に応じて型をオプショナル(?)に調整してください。
日付や特殊な形式の文字列も自動判定されますか?
いいえ。日付を表す文字列(ISO 8601形式など)も、通常の文字列型(string)として扱われます。