JSON 转 TypeScript 生成器

如何将 JSON 转换为 TypeScript – 分步指南

使用此 JSON 转 TypeScript 生成器，可从 JSON 示例快速生成类型安全的接口与类型，适用于前端应用与 Node.js 服务。

1. 步骤 1 – 粘贴 JSON 示例

   • 将具有代表性的 JSON 对象或数组粘贴到左侧编辑器中。
   • 尽量包含嵌套对象、数组和可为 null 的字段，方便正确推断类型。
   • 使用 导入 从文件、URL 或示例数据加载 JSON。

2. 步骤 2 – 选择 TypeScript 生成选项

   • 设置与模型一致的 根类型名称（例如 Root）。
   • 选择空值处理策略（可选 (?) 或 联合 (| null)），与代码风格保持一致。
   • 决定输出为 interface 还是 type，便于与你的项目习惯匹配。

3. 步骤 3 – 检查生成的代码

   • 确认字段命名、类型推断，以及数组/对象的映射方式是否符合预期。
   • 根据需要调整 根类型名称、空值处理策略以及可选的框架选项。
   • 如果某些字段推断不准确，优化示例 JSON 后重新生成。

4. 步骤 4 – 在项目中使用生成类型

   • 将输出放入项目的类型文件中，并从模块中导出。
   • 在 API 响应、DTO 以及运行时解析边界处使用这些类型。
   • 当 JSON payload 变化时重新生成，保持前后端同步。

5. 步骤 5 – 复制或下载

   • 将输出复制到项目中，或下载为文件。
   • 运行格式化/代码检查工具，让代码风格与项目保持一致。
   • 若目标语言需要序列化/解析库，请在项目中添加相应依赖。

// 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
}

// 生成的 TypeScript 类型（简化）
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 与 Schema 工具。