JSON 转 TypeScript 接口
把 JSON 推断成带 export 的 TypeScript 接口,嵌套对象拆成独立类型,生成 T[] 数组。
后端返回的 JSON 一多,手写 TypeScript 类型就是纯粹的体力活:字段名抄错、嵌套层级漏一层、数组元素类型随手写成 any,编译期帮不上忙。把接口返回的样例 JSON 粘进来,就能得到一份结构完整的 interface 定义,字段名和嵌套关系都按原始 JSON 走,复制进项目后按需删改即可。
转换在浏览器里用 JavaScript 完成,JSON 和生成的代码都不会发往服务器,内网接口和带用户信息的样例数据可以放心粘贴。需要提醒的是它按静态样例推断,结果只反映这一份数据:数组只看第一个元素、null 只能退回 any,生成后建议对着真实的接口文档核对一遍字段类型。
类型推断规则
字符串、数字、布尔分别生成 string、number、boolean;null 生成 any,不会生成联合类型,也不会把字段标成可选。空数组生成 any[]。数组只取第一个元素的类型,[1, "a"] 会生成 number[],后面的字符串类型静默丢失。JSON 里的数字统一是 number,所以 1.0 和 1 没有区别;雪花 ID 这类大整数在 JSON.parse 阶段就已经丢精度,生成 number 后需要手工改成 string。日期字符串仍是 string。
嵌套接口与命名
每个嵌套对象都会拆成独立的 export interface,名字取它所在的键名并把首字母大写,不做驼峰转换,所以 user_profile 生成 User_profile、nested 生成 Nested。同名嵌套对象只保留第一次生成的定义,如果两个不同分支都有 data 键而结构不同,后面的会直接复用第一个定义,字段类型可能是错的,需要手工拆开重命名。根节点是数组时,会按第一个元素生成接口,再补一行列表别名,把接口名加上 List 后缀;根节点是基本类型时只生成一行 export type。
键名处理与生成结果
顶层接口名固定为 RootObject,页面没有改名入口,需要换名可直接在结果里替换。合法标识符的键原样保留;含连字符、点号、空格或中文的键会写成带双引号的属性名,在 TypeScript 里访问这类属性要用方括号加字符串的形式。所有字段都是必填,没有可选标记,null 字段也不会变成可选,接口在严格模式下无法表达「字段可能不存在」。生成结果只读展示,可以整体复制或下载为 .ts 文件。
常见问题
- JSON 里的 null 字段为什么生成的是 any 而不是 null 或可选字段?
- 生成逻辑遇到 null 时无法判断这是「值就是 null」还是「暂时为 null 的其它类型」,所以退回 any 以兼容两种情况。代价是丢掉了类型约束,同时它不会把字段标成可选,缺字段仍然不符合这个接口。需要更严格时手工改成具体类型加 null 的联合,或给字段加问号。
- 数组元素类型不一致时生成的类型为什么不对?
- 数组只取第一个元素推断类型,[1, "a"] 会生成 number[],后面的字符串既不参与合并也不会生成联合类型。遇到混合数组应该手工改成 (number | string)[];如果数组元素结构不固定,也可以让它保持 any[],再在业务代码里按判别字段收窄。
- 生成的是 interface 还是 type?根接口名可以自己指定吗?
- 对象都生成 export interface;根节点是数组时额外补一个 export type 的列表别名,根节点是基本类型时只生成一行 export type。根接口名固定为 RootObject,页面没有改名入口,需要换成业务名可以直接改生成结果,或用编辑器的全局替换一次性处理。