JSON to TypeScript

JSONデータをTypeScriptインターフェースまたは型定義に自動変換

JSON入力
行数: 1 | 文字: 0
TypeScript出力
// JSON入力後、TypeScript型定義が自動生成
: 0 | 行数: 1

JSON to TypeScriptとは?

JSON to TypeScriptは、JSONデータをTypeScript型定義に自動変換するツールです。JSON構造を分析し、対応するinterfaceまたはtype宣言を生成し、TypeScriptプロジェクトでタイプセーフとコードヒントを提供します。

使用方法

  1. 左側入力ボックスにJSONデータを貼り付け、またはサンプルボタンでサンプルをロード
  2. オプション設定:ルート型名を設定、interface/typeスタイルを選択、export追加の有無など
  3. 右側に対応するTypeScript型定義が自動生成
  4. 「コピー」ボタンで生成された型定義をクリップボードにコピー
  5. 型定義をTypeScriptプロジェクトに貼り付けて使用

使用例

単純オブジェクト変換

输入 JSON:
{
  "name": "张三",
  "age": 28,
  "isActive": true
}

输出 TypeScript:
export interface Root {
  name: string;
  age: number;
  isActive: boolean;
}

ネストオブジェクト変換

输入 JSON:
{
  "user": {
    "id": 1,
    "profile": {
      "avatar": "url",
      "bio": "简介"
    }
  }
}

输出 TypeScript:
export interface UserProfile {
  avatar: string;
  bio: string;
}

export interface User {
  id: number;
  profile: UserProfile;
}

export interface Root {
  user: User;
}

よくある質問 (FAQ)

Q: 生成された型はどう使いますか?

A: 生成された型定義を.tsファイルにコピーし、コードで使用します。例:const data: Root = JSON.parse(response)

Q: interfaceとtypeの違いは?

A: interfaceは拡張・実装可能、オブジェクト型定義に適しています;typeはより柔軟で、ユニオン型、交差型などを定義できます。単純なオブジェクト構造では両者は機能的に似ています。

Q: 配列型のJSONはどう処理しますか?

A: ツールは配列要素型を自動識別します。オブジェクト配列の場合、配列要素用に別の型定義を生成し、ItemType[]で配列を表現します。

Q: 生成された型は編集可能ですか?

A: 生成後は自由に編集可能。実際のニーズに応じて型名を調整、オプションフィールドマーク(?)を追加、または一部フィールドの型定義を変更することを推奨します。