変換ツール

JSON → TypeScript 変換｜null・配列・ネストから型生成

JSON サンプルから TypeScript の interface または type を生成します。ネスト、null、混合型の配列を確認し、API レスポンス用の型の下書きをブラウザ内で作れます。

API レスポンスから、名前を付けた TypeScript の型を作る。

ブラウザ内で変換します。null は値の型、? は配列内の一部のオブジェクトで省略されたフィールドを表します。空配列の要素型は unknown です。

例を読み込む（現在の入力を置き換えます）

JSON

TypeScript

こんなときに使えます

  • API レスポンスから、名前を付けた TypeScript の型を作る。
  • 配列内の複数オブジェクトを比較し、型の違いと省略可能なフィールドを確認する。

使い方

  1. 実際の JSON を貼り付けるか、上の 3 つの例を読み込みます。サンプルボタンは現在の入力を置き換えます。
  2. 「ルートの型名」を指定し、interface（ネストを別の型に分離）または type（1 つの型にまとめる）を選びます。
  3. null と ?、文字列と数値の違いを確認してコピーします。下の例は型名 Root・interface の設定です。

入力例

{"items":[{"id":1,"name":"東京","email":"[email protected]"},{"id":"002","name":null}]}

出力例

export interface Root {
  items: ItemsItem[];
}

export interface ItemsItem {
  id: number | string;
  name: string | null;
  email?: string;
}

仕様と注意点

配列のすべての要素を参照します。例の id は number | string、name は string | null です。name は両方の要素に存在するため ? は付きません。email は一部の要素にないため省略可能になります。

空配列から要素型は判断できないため unknown[] を出力します。混合配列は固定長のタプルではなく、要素の型の和集合を持つ配列になります。

推定はサンプルの範囲に限られます。サンプルに一度も出ないフィールド、日付やメールの形式、値の範囲、フィールド間の条件は推定しません。

入力は標準 JSON です。コメントや末尾のカンマがある場合は JSON 整形で標準 JSON にしてから入力してください。先頭ゼロを持つ ID は文字列で扱います。

入力上限は 100 万文字、構造の目安は 64 階層・5 万値です。大きなレスポンスは代表的なレコードに絞ってください。TypeScript の型だけでは実行時の入力検証はできません。

入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。

よくある質問

interface と type はどちらを選べばよいですか？

表す形は同じです。interface はネストしたオブジェクトごとに名前付きの型を作るため再利用しやすく、type はネストを含めて 1 つの型エイリアスにまとめます。

TypeScript の class を生成できますか？

できません。生成するのは interface または type です。実行時の検証が必要な場合は JSON → Zod を使い、スキーマを仕様に合わせて調整してください。

null と省略可能なフィールドはどう違いますか？

{"name":null} は name が存在し、値が null です。{} は name 自体がありません。このツールは null を型に残し、同じ配列内でフィールドがないオブジェクトがあるときだけ ? を付けます。

1、文字列、null が同じ配列にある場合は？

[1,"sample",null] は (number | string | null)[] になります。配列の長さや並び順を固定するタプルにはしません。

ルートの型名に使える文字は？

英字・_・$ で始め、続きには数字も使えます。Root や ApiResponse などが使えます。予約語や出力に必要な組み込み型の名前は避けてください。

仕様を確認する