ネストされたJSONオブジェクトをTypeScript Interfaceに変換する

ネストされたサブオブジェクトを持つJSONから複数のTypeScript interfaceを生成する方法を学びます。命名規則やフラット化戦略のヒントも紹介。

Basic Conversions

詳細な説明

ネスト構造の処理

実際のJSONがフラットであることはほとんどありません。APIは通常、オブジェクトの中にオブジェクトを返し、各ネストレベルが個別のTypeScript interfaceにマッピングされます。

JSON例

{
  "id": 1,
  "name": "Acme Corp",
  "address": {
    "street": "123 Main St",
    "city": "Springfield",
    "geo": {
      "lat": 39.7817,
      "lng": -89.6501
    }
  }
}

生成されるTypeScript

interface Geo {
  lat: number;
  lng: number;
}

interface Address {
  street: string;
  city: string;
  geo: Geo;
}

interface Company {
  id: number;
  name: string;
  address: Address;
}

なぜ個別のInterfaceに分けるのか

ネストされたオブジェクトを個別のinterfaceに抽出することで、以下の利点があります:

  1. 再利用性Geoは座標が出現する任意の場所(店舗の所在地、イベント会場など)で再利用できます。
  2. 可読性{ street: string; city: string; geo: { lat: number; lng: number } }のような深くネストされたインライン型はすぐに読みにくくなります。
  3. テスト容易性AddressCompanyとは独立してテストやモックデータの作成ができます。

命名規則

コンバーターはプロパティキーをPascalCaseに変換してinterface名を導出します。異なるパスで同じ名前を持つが異なる形状のプロパティがある場合、数値サフィックスやネスト名(例:UserAddress vs OrderAddress)が付加されます。生成された名前を確認し、ドメイン言語に合わせてリネームすることをお勧めします。

深さの制限

極端に深いネスト(5レベル以上)はコードの問題を示唆しています。JSONの再設計を検討するか、中間層をフラット化して単一のinterfaceにすることを検討してください。

ユースケース

住所や位置情報のサブオブジェクトを含む深くネストされた企業データを返すサードパーティAPIを統合し、すべてのレベルに型安全にアクセスする必要がある場合に使用します。

試してみる — JSON to TypeScript

フルツールを開く