JSONからTypeScriptへ

JSONサンプルを貼り付けると、その構造に合致するTypeScriptインターフェースをツールが推論します。フィールドの型は観測された値(stringnumberbooleanArray<T>)から決まり、ネストされたオブジェクトにはそれぞれ独自の名前付きインターフェースが割り当てられます。null または欠落と観測されたフィールドは、選んだスタイルに応じて省略可能(?)または null 許容(| null)になります。

JSONをTypeScriptに変換する方法

  1. 1

    JSONを貼り付ける

    1つのサンプルでも十分ですが、複数のサンプルを与えると null 許容性とユニオン型の推論精度が向上します。

  2. 2

    出力スタイルを選ぶ

    `interface`(既定)、`type` エイリアス、またはすべてのフィールドに `readonly` を付けた読み取り専用インターフェース。

  3. 3

    省略/null の方針を選ぶ

    フィールドを `?`(存在しないことがある)にするか、`| null`(常に存在するが null になりうる)にするかを指定します。

  4. 4

    型をコピーする

    `.ts` ファイルに貼り付ければ、API レスポンスに型安全にアクセスできます。

入力:

{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }

出力:

interface User {
  id: number;
  name: string;
  age: number | null;
  tags: string[];
  address: Address;
}

interface Address {
  city: string;
}

型のマッピング

JSON TypeScript
文字列 string
整数 / 小数 number
真偽値 boolean
null のみ null
null + T T | null(または T?
T の配列 T[]
混在配列 (T1 | T2)[]
オブジェクト 名前付きのネストされたインターフェース
空の配列 unknown[](推論不可)

省略可能フィールドと null 許容フィールド

  • foo?: string、フィールドがオブジェクトに存在しないことがあります。undefined のチェックが必要です。
  • foo: string | null、フィールドは常に存在しますが、明示的に null になることがあります。
  • foo?: string | null、存在しない、または null のどちらもあり得ます。

JSON 自体に undefined はありませんが、フィールドの欠落をどう表すかは API によって異なります。使用する API のセマンティクスに合わせてください。

  • REST API は通常、欠落したフィールドを省略します -> ?:
  • GraphQL は要求されたすべてのフィールドを常に返します -> | null
  • 一部の SDK は文脈に応じて両方を使い分けます。

ユニオン型とリテラル型

サンプル全体で同じ文字列フィールドが少数の値だけを取る場合("status": "pending""active""archived")、ツールは文字列リテラルのユニオン型を出力できます。

status: "pending" | "active" | "archived";

この動作が必要なら「文字列リテラルのユニオンを推論」を有効にしてください。

よくある間違い

  • 1つのサンプルだけから推論する。 すべてのフィールドが必須になり、null 許容性を観測できません。より正確な型を得るには、変化のある 5〜10 個のサンプルを与えてください。
  • 空の配列。 "tags": [] は型情報を持たないため、ジェネレーターは unknown[] を出力します。少なくとも1つの要素を含むサンプルを用意してください。
  • 型が混在した配列。 [1, "two", true](number | string | boolean)[] を生成します。多くの場合、これは JSON に型を付けるのではなく設計を見直すべきことを意味します。
  • 数値の文字列キー。 JSON {"1": "a", "2": "b"} は TypeScript では依然としてオブジェクト(Record<string, string>)であり、配列ではありません。ジェネレーターはこれを正しく処理します。

よくある質問

API に合わせてください。null のフィールドを省く REST API には ?: が向いています。選択したフィールドを常に返す GraphQL には | null が向いています。迷ったときは、必須構文の T | null のほうが厳格で、コンパイル時により多くのバグを検出できます。

はい。この機能を有効にして複数のサンプルを与えると、サンプル全体で2〜5個の異なる文字列値が観測されたフィールドはリテラルのユニオン型として出力されます。それを超えると string にフォールバックします。

ほとんどの場合は interface です。拡張に対して開かれており、TypeScript による最適化も効きます。type エイリアスはユニオン、交差、タプル、マップ型に便利です。JSON から生成した型ではどちらでも機能するので、プロジェクトの規約に合わせて選んでください。

はい。ネストされた各オブジェクトはそれぞれ独自のインターフェースになり、名前はキーから導出されます(user.address -> Address)。非常に深い構造や繰り返しの多い構造では、JSON Schema と専用の schema-to-TS ジェネレーターの利用を検討してください。

関連ツール

このツールは他の言語でも利用できます