跳到主要内容

JSON 转 TypeScript

自动生成接口类型

类型由样例数据反推,只能覆盖这次出现的字段。后端同一个字段在不同情况下返回 null 还是对象、数组里有没有多种元素类型,都需要你人工补成联合类型。 空数组推断为 unknown[],建议手动改成具体类型。全部在本地完成。

JSON 转 TypeScript是什么

前端拿 TypeScript 对接后端接口,最烦的就是手写 interface。样例数据里已经包含了字段名和类型,反推一遍即可。

这个工具能做什么

  • 自动生成 interface,嵌套对象拆成子接口
  • 可设根类型名、全部字段可选、加 export
  • 数组元素类型自动推断,不一致时生成联合类型
  • 子接口排在前面,根类型压轴

怎么使用(输入说明)

  1. 粘贴接口返回的 JSON
  2. 填根类型名
  3. 勾选可选与 export
  4. 复制生成的代码

使用时的几个注意点

  • 类型只能覆盖样例里出现的字段
  • 空数组会推断成 unknown[]
  • 同名字段冲突会自动加数字后缀

实例

含 user 嵌套对象和 tags 数组的 JSON,生成 Root、User 两个 interface。

常见问题 FAQ

Q:生成完就能直接用吗?

A:基本能用,但要人工补两处:同一个字段在不同情况下返回 null 还是对象要补成联合类型;空数组推断为 unknown[],需要改成具体类型。

Q:嵌套对象怎么处理的?

A:自动拆成独立的子接口,并按「子接口在前、根类型在后」的顺序排列,读代码时不用来回跳。

Q:数组元素类型不一致怎么办?

A:工具会推断成联合类型,比如 Array<string | number>。如果样例数据里只出现了一种,就只能推断出那一种。

常见问题

生成完就能直接用吗?
基本能用,但要人工补两处:同一个字段在不同情况下返回 null 还是对象要补成联合类型;空数组推断为 unknown[],需要改成具体类型。
嵌套对象怎么处理的?
自动拆成独立的子接口,并按「子接口在前、根类型在后」的顺序排列,读代码时不用来回跳。
数组元素类型不一致怎么办?
工具会推断成联合类型,比如 Array<string | number>。如果样例数据里只出现了一种,就只能推断出那一种。