JSON → TypeScript ジェネレーター
JSONからTypeScriptのinterfaceを自動生成。ネストオブジェクト・配列・Union型・省略可能プロパティに対応。ブラウザ完結、無料。
使い方
- 左側のパネルにJSONを貼り付けるか入力します。リアルタイムで検証しエラーをハイライト表示します。
- 必要に応じて Root interface name(デフォルト:
RootObject)を設定します。 - Make properties optional をオンにすると、すべてのフィールドが
?付きのオプショナルになります。 - Use type instead of interface をオンにすると出力キーワードが
typeになります。 - Generate TypeScript をクリックしてインターフェースを生成します。
- Copy をクリックして出力をクリップボードにコピーします。
型推論ルール
null→null- 文字列 →
string - 数値 →
number - 真偽値 →
boolean - 空配列 →
unknown[] - オブジェクト配列 → マージされたインターフェース +
ItemName[] - 混合プリミティブ配列 → Union型(例:
(string | number)[]) - ネストオブジェクト → 独立した名前付きインターフェース
例
以下のJSONを入力すると:
{"user": {"name": "Alice", "age": 30}, "tags": ["admin", "user"]}
次のように生成されます:
interface User {
name: string;
age: number;
}
interface RootObject {
user: User;
tags: string[];
} FAQ
このツールは何を生成しますか?
JSONオブジェクトからTypeScriptのinterface(またはtype alias)宣言を生成します。ネストされたオブジェクトは個別の名前付きインターフェースになり、配列内の混合型はUnion型になります。
ネストされたオブジェクトはどう処理されますか?
ネストされた各オブジェクトフィールドは、フィールドキーのPascalCase名を持つ独立したインターフェースとして抽出されます。例えば 'address' フィールドは 'Address' インターフェースになり、親インターフェースはその名前で参照します。
オブジェクトの配列はどう処理されますか?
配列にオブジェクトが含まれる場合、すべてのオブジェクトのフィールドがマージされて1つのアイテムインターフェースになります。一部のオブジェクトにしか存在しないフィールドはオプショナルになります。
'Make properties optional' オプションとは何ですか?
チェックすると、生成されるすべてのインターフェースのすべてのプロパティに '?' が付き、省略可能になります。部分的なデータを受け取る可能性がある場合や、緩い型定義が必要な場合に便利です。
interface と type の違いは何ですか?
どちらもオブジェクトの形状を宣言できます。'interface' は宣言マージをサポートし、オブジェクト型の慣用的な書き方です。'type' はより柔軟で、プリミティブ・Union型・タプルも表現できます。'Use type instead of interface' で切り替えられます。
データはサーバーに送信されますか?
いいえ。型推論エンジン全体がブラウザ内で動作します。データは端末の外に出ません。