なぜ JSON を TypeScript に変換するのか？

TypeScript は静的型付けを使用して、実行時ではなくコンパイル時に bug を検出します。API、設定ファイル、または JSON を返す外部データソースを扱う場合、そのデータの構造を記述する型やインターフェースを定義する必要があります。特に深くネストされたオブジェクトや、構造が異なる大きな配列に対して、これらの定義を手動で記述するのは面倒でエラーが発生しやすい作業です。変換を自動化することで、時間を節約し、型と実際のデータの不一致リスクを軽減できます。

ツールの説明

このツールは、オブジェクト、配列、ネストされた構造など、有効な JSON 入力を受け取り、対応する TypeScript の型エイリアスまたはインターフェースを即座に生成します。ネストされたオブジェクトを自動的に検出し、それぞれに対して個別の名前付き型を作成し、要素の型を推論することで配列を処理します。プロジェクトの規約に応じて、interface と type の出力モードを切り替えることができます。

例

入力 JSON:

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "zip": "62701"
  },
  "roles": ["admin", "editor"]
}

出力（Interface モード）:

interface RootObject {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
}

interface Address {
  street: string;
  city: string;
  zip: string;
}

出力（Type モード）:

type RootObject = {
  id: number;
  name: string;
  email: string;
  address: Address;
  roles: string[];
};

type Address = {
  street: string;
  city: string;
  zip: string;
};

機能

  • ドロップダウン一つで interface または type エイリアスの出力を切り替え可能
  • ネストされたオブジェクト型の自動検出と抽出
  • オブジェクトの配列を含む、配列要素の型推論
  • 配列内で形状が異なるオブジェクトを、オプショナルプロパティを持つ単一の統合型にマージ
  • シンタックスハイライト付きの JSON および TypeScript エディターによるリアルタイム変換

ユースケース

  • フロントエンド開発中に API レスポンスのペイロードに対する TypeScript 型を素早く定義する
  • JSON 設定ファイルやデータベースエクスポートから型定義を生成する
  • 新しい TypeScript プロジェクトを開始する際に、型安全なデータモデルの雛形を作成する

仕組み

このツールは有効な JSON を解析し、構造を再帰的に走査します。検出した各オブジェクトに対して、そのオブジェクトのキーに対応するフィールドを持つ名前付きインターフェースまたは型エイリアスを作成します。ネストされたオブジェクトは、名前で参照される追加の型を生成します。配列は要素の型を判定するために解析され、すべての要素がオブジェクトである場合、それらの形状は単一の型にマージされ、すべての要素に存在しないキーはオプショナルになります。

ヒント

  • JSON データの代表的なサンプルを貼り付けてください。サンプルが完全であるほど、生成される型の精度が高くなります。
  • 形状が混在するオブジェクトの配列に対しては、ツールがオプショナルフィールドを検出できるよう、複数のオブジェクトを含めてください。
  • プロジェクトでオブジェクト形状に型エイリアスを好む場合は Type モードを、インターフェース規約に従う場合は Interface モードを使用してください。