JSON 转 TypeScript是什么
前端拿 TypeScript 对接后端接口,最烦的就是手写 interface。样例数据里已经包含了字段名和类型,反推一遍即可。
这个工具能做什么
- 自动生成 interface,嵌套对象拆成子接口
- 可设根类型名、全部字段可选、加 export
- 数组元素类型自动推断,不一致时生成联合类型
- 子接口排在前面,根类型压轴
怎么使用(输入说明)
- 粘贴接口返回的 JSON
- 填根类型名
- 勾选可选与 export
- 复制生成的代码
使用时的几个注意点
- 类型只能覆盖样例里出现的字段
- 空数组会推断成 unknown[]
- 同名字段冲突会自动加数字后缀
实例
含 user 嵌套对象和 tags 数组的 JSON,生成 Root、User 两个 interface。
常见问题 FAQ
Q:生成完就能直接用吗?
A:基本能用,但要人工补两处:同一个字段在不同情况下返回 null 还是对象要补成联合类型;空数组推断为 unknown[],需要改成具体类型。
Q:嵌套对象怎么处理的?
A:自动拆成独立的子接口,并按「子接口在前、根类型在后」的顺序排列,读代码时不用来回跳。
Q:数组元素类型不一致怎么办?
A:工具会推断成联合类型,比如 Array<string | number>。如果样例数据里只出现了一种,就只能推断出那一种。