JSON → TypeScript ジェネレーター

JSONからTypeScriptのinterfaceを自動生成。ネストオブジェクト・配列・Union型・省略可能プロパティに対応。ブラウザ完結、無料。

100% クライアントサイド データはブラウザ外に出ません 無料 · 登録不要
JSON 入力
TypeScript 出力

使い方

  1. 左側のパネルにJSONを貼り付けるか入力します。リアルタイムで検証しエラーをハイライト表示します。
  2. 必要に応じて Root interface name(デフォルト: RootObject)を設定します。
  3. Make properties optional をオンにすると、すべてのフィールドが ? 付きのオプショナルになります。
  4. Use type instead of interface をオンにすると出力キーワードが type になります。
  5. Generate TypeScript をクリックしてインターフェースを生成します。
  6. Copy をクリックして出力をクリップボードにコピーします。

型推論ルール

  • nullnull
  • 文字列 → 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' で切り替えられます。

データはサーバーに送信されますか?

いいえ。型推論エンジン全体がブラウザ内で動作します。データは端末の外に出ません。