JSON 转 TypeScript 类型指南

为什么需要 JSON 转 TypeScript 类型

在前后端协作中，API 响应通常是 JSON 格式。手动编写 TypeScript 接口既耗时又容易出错，特别是当接口字段多、嵌套深时。自动生成类型定义可以：

• 减少手写接口的工作量
• 避免字段名拼写错误
• 保持前后端类型一致
• 加速代码补全和重构

基本转换规则

简单对象

{
  "id": 1,
  "name": "张三",
  "active": true
}

生成结果：

interface RootObject {
  id: number;
  name: string;
  active: boolean;
}

类型映射规则

JSON 值	TypeScript 类型
"hello"	string
42	number
3.14	number
true / false	boolean
null	null
[1, 2, 3]	number[]
{"a": 1}	嵌套接口

使用 JSON→TypeScript工具

步骤一：获取 JSON 数据

从浏览器开发者工具的 Network 面板复制 API 响应，或直接粘贴已有的 JSON 数据。

步骤二：打开工具

进入 JSON→TypeScript工具，将 JSON 粘贴到输入区域。

步骤三：配置生成选项

• 根接口名称：默认 RootObject，建议改为语义化名称（如 UserInfo）
• 导出修饰符：选择 interface 或 type
• 可选字段：值为 null 的字段是否标记为可选（?）
• 只读修饰符：是否为所有字段添加 readonly

步骤四：生成并复制

点击生成按钮，TypeScript 类型定义即刻输出，一键复制到剪贴板。

处理嵌套对象

深层嵌套的 JSON 会自动拆分为多个接口：

{
  "user": {
    "profile": {
      "avatar": "url",
      "bio": "text"
    }
  }
}

生成：

interface Profile {
  avatar: string;
  bio: string;
}

interface User {
  profile: Profile;
}

interface RootObject {
  user: User;
}

建议将生成的接口拆分到独立文件中，按模块组织。

处理联合类型

当数组中包含不同类型的元素时：

{
  "items": ["text", 42, true]
}

工具会生成联合类型：

interface RootObject {
  items: (string | number | boolean)[];
}

处理可选字段

API 响应中某些字段可能不存在，常见处理方式：

• 字段值为 null 时标记为可选：bio?: string | null
• 字段缺失时标记为可选：bio?: string
• 在工具中勾选「null 字段标记为可选」即可自动处理

实战：从真实 API 生成类型

1. 打开浏览器开发者工具 → Network 面板
2. 找到目标 API 请求，右键 → Copy Response
3. 粘贴到 JSON→TypeScript工具
4. 设置根接口名称（如 ApiResponse）
5. 生成后复制到项目的 types/ 目录

常见问题

问题	原因	解决方法
类型过于具体	单条数据推断类型	补充多条样本数据
嵌套层级太深	JSON 结构复杂	手动合并部分接口
数组元素类型不一致	混合类型数组	使用联合类型或泛型
日期变成 string	JSON 无日期类型	手动改为 Date 类型

进阶技巧

1. 用 JSON格式化 先整理 JSON 再生成类型
2. 同样方法可用 JSON→Go工具 生成 Go 结构体
3. 生成的接口建议配合 Zod 做运行时校验
4. 大型项目推荐用 openapi-typescript 从 Swagger 生成

总结

从 JSON 自动生成 TypeScript 类型是提升开发效率的利器。JSON→TypeScript工具 让你在几秒内完成类型定义，避免手动编写的繁琐和错误。结合本文的嵌套处理、可选字段等技巧，可以应对各种复杂场景。