JSON Swiss

JSON Swiss

JSON から TypeScript を生成

JSON 入力

1

生成された TypeScript

Configuration

TypeScript 生成オプション

type alias ではなく interface を生成

undefined になり得る場合にオプションとしてマーク

JSON データを追加して TypeScript 型を生成します

interface、type、型付きオブジェクトを生成

JSON を TypeScript に変換する方法 – 手順ガイド

この JSON→TypeScript 生成ツールを使って、フロントエンドアプリや Node.js サービス向けに JSON サンプルから型安全な interface/type を作成します。

  1. ステップ 1 – JSON サンプルを貼り付ける

    • 左側のエディターに代表的な JSON オブジェクトまたは配列を貼り付けます。
    • ネストしたオブジェクト、配列、null になり得るフィールドを含めて、型推論を正確にします。
    • Import を使ってファイル、URL、サンプルデータから JSON を読み込みます。

  2. ステップ 2 – TypeScript 生成オプションを選ぶ

    • モデルに合わせた Root Type Name を設定します（例: Root）。
    • コードベースに合わせて null の扱い（Optional (?) vs Union (| null)）を選びます。
    • 出力を interfaces にするか type エイリアスにするか決めます。

  3. ステップ 3 – 生成されたコードを確認する

    • フィールド名、型、配列/オブジェクトの表現を確認します。
    • 利用可能なら Root Type Name、null の扱い、フレームワーク等のオプションを調整します。
    • 推論が違う場合は JSON サンプルを調整して再生成します。

  4. ステップ 4 – 生成された型を使う

    • 出力をプロジェクトに貼り付け、型モジュールから export します。
    • API レスポンス、DTO、ランタイムパース境界で型を利用します。
    • JSON ペイロードが変わったら再生成してクライアントと同期します。

  5. ステップ 5 – コピーまたはダウンロード

    • 出力をプロジェクトにコピーするか、ファイルとしてダウンロードします。
    • フォーマッター/リンターを実行してコードスタイルを整えます。
    • 必要に応じて JSON の解析/シリアライズ用ライブラリを追加します。

クイックヒント

  • 本当に未型付けのフィールドには unknown を使い、検証後に絞り込みます。
  • API が不安定なら JSON Schema を生成して実行時に検証することも検討します。
  • 生成ファイルは差し替えやすいように分離して管理します。
出力例（簡略版）
// JSON 入力
{
  "id": 123,
  "name": "Maeve Winters",
  "email": "[email protected]",
  "active": true,
  "roles": ["admin", "editor"],
  "metadata": { "plan": "pro" },
  "createdAt": "2024-03-01T10:15:00Z",
  "score": 99.5,
  "notes": null
}

// Generated TypeScript types (simplified)
export interface Metadata {
  plan: string;
}

export interface Root {
  id: number;
  name: string;
  email: string | null;
  active: boolean;
  roles: string[];
  metadata: Metadata;
  createdAt: string;
  score: number;
  notes: null;
}

関連する JSON & TypeScript ツール

この JSON→TypeScript 生成ツールと相性の良い JSON/スキーマ関連ツールもチェックしてください。

TypeScript 型→JSON & JSON Schema

既存の TypeScript 型から JSON 例と JSON Schema を生成し、ドキュメントや検証に使えます。

JSON Schema 生成ツール

JSON サンプルから JSON Schema を生成して API ペイロードを検証します。

JSON フォーマッター & バリデーター

型生成前に JSON を整形・検証して実行時問題を防ぎます。

JSON→Java 生成ツール

JVM サービスも運用している場合に Java POJO を生成します。

JSONを表に変換

リアルタイムに JSON データを編集できるビジュアルな表形式インターフェース

よくある質問

生成される TypeScript コードはどの機能に対応していますか？

TypeScript の interface、type、class を型安全に生成します。オプションプロパティ、union 型、ネストした interface、配列型、適切な null の扱いに対応し、最新の TypeScript 標準と互換性があります。

複雑なネスト構造はどう扱われますか？

複雑なネストオブジェクトは別の interface として分割され、関係性を保ったまま型を生成します。配列も正しく型付けされます。

null / undefined の扱いはカスタマイズできますか？

はい。オプションプロパティ（?）、| null の union、null 値の無視など、複数の戦略から選べます。

生成コードはそのまま本番で使えますか？

はい。ベストプラクティスに沿った export を含むコードを生成し、TypeScript プロジェクトにそのまま取り込めます。