为什么需要 JSON 转 TypeScript 类型

在 TypeScript 项目中，接口返回的数据如果没有类型定义，就只能用 any，等于放弃了类型检查带来的全部好处：编辑器没有自动补全、字段改名不会报错、运行期才暴露出拼写问题。手写 interface 又非常繁琐，尤其是接口字段多、嵌套深的时候，既要保证类型正确，又要不漏字段，还容易和接口文档不一致。

把接口文档或抓包里的 JSON 示例直接转换成 TypeScript 类型，是最省事也最不容易出错的方案。比如下面这段接口返回：

{
  "id": 1024,
  "name": "张三",
  "roles": ["admin", "editor"],
  "profile": {
    "city": "上海",
    "active": true
  },
  "tags": null
}

转换后可以得到完整、可读的类型定义：

interface ApiResult {
  id: number;
  name: string;
  roles: string[];
  profile: Profile;
  tags: null;
}

之后开发时就能享受到完整的类型提示：字段拼错、类型用错都会在编译阶段被拦截，接口联调效率明显提升。

在线生成 TypeScript 类型的步骤

  1. 打开 JSON 转 TypeScript 工具，把接口返回的 JSON 示例粘贴到输入框。
  2. 根据需要选择生成风格：interface 或 type，并决定是否把可空字段标记为可选属性。
  3. 点击「转换」，右侧立即生成类型定义；如果 JSON 不合法，会提示错误位置。
  4. 点击「复制」把结果粘贴到项目里，再按业务补充注释或调整联合类型即可。

整个过程在浏览器本地完成，不依赖任何后端服务，粘贴含敏感字段的返回数据也不用担心。

核心功能一览

一键转换

粘贴 JSON 即可生成 TypeScript interface / type，支持 2 空格、4 空格等缩进风格。

深层嵌套

递归处理对象、数组、数组套对象等结构，多层数据自动拆分为命名子类型。

可选字段

可把值为 null 的字段转换为可选属性（?），更贴合接口实际返回。

本地处理

纯浏览器端解析，数据不上传服务器，适合处理敏感接口数据。

常用字段处理规则

JSON 示例值生成的 TS 类型说明
"abc"string字符串
1024number数字
true / falseboolean布尔值
[1, 2, 3]number[]数组按元素类型推导
{"a": 1}Nested嵌套对象生成子类型
nullnull 或可选属性按选项决定是否转成 ?

常见使用场景

  • 接口联调：拿到后端返回示例，直接生成前端类型定义，减少来回沟通。
  • 类型化配置：把 JSON 配置文件转为 TS 类型，享受补全与校验。
  • 迁移遗留项目：给原本用 any 的地方补齐类型，逐步提升类型覆盖率。
  • 编写类型测试：用真实数据生成类型，验证类型与数据结构的一致性。