JSON 转 TypeScript
粘贴 JSON 自动生成 TS interface / type,推断与生成在浏览器本地完成,数据不会上传。
使用说明
把一段 JSON 粘贴进来,递归推断结构并生成 TypeScript 的 interface 或 type 定义,可自定义根类型名、自动合并数组元素字段并标记可选字段;推断全部在浏览器本地完成,接口数据不会上传。
- 把接口返回的 JSON 粘贴到左侧「输入 JSON」框,对象、对象数组或直接的数组都可以,粘贴后点「生成 TypeScript」。
- 在「根类型名」里填写根类型名(默认 Root),在「输出形式」里选择 interface 或 type;根类型下面嵌套的对象会拆成独立类型,命名由父类型名加字段名组成。
- 勾选「数组元素缺字段标 ?」后,数组里只出现在部分元素上的字段会生成可选字段,所有元素都有的字段按必填输出;取消勾选则一律按必填处理。
- 勾选「null 生成 | null」后,取值为 null 的字段会在类型里并上 null;不勾选时 null 视为 unknown,只出现过 null 的字段类型就是 unknown。
- 点「复制」取走结果,或点「下载 .ts」保存成文件;JSON 语法有误时红框会指出第几行第几列,按提示改好后重新生成,点「清空」可继续处理下一段数据。
常见问题
- 为什么数组里的字段变成了可选字段?
- 工具按数组全部元素的字段并集生成类型:只出现在部分元素上的字段会被标成可选(例如第二条记录没有 stock,就输出 stock?: number),这样生成的类型才能通过真实数据的编译检查。希望全部必填时取消「数组元素缺字段标 ?」的勾选即可。
- 嵌套类型名是怎么起的?
- 取父类型名加字段名拼接而成,例如根类型 Root 的 owner 字段会生成 RootOwner,items 数组里的对象会生成 RootItems。若名字冲突会自动加数字后缀,保证输出可以直接编译;想改名字直接改生成的代码即可。
- null 勾选与不勾选有什么区别?
- 不勾选时 null 不参与联合类型,只含 null 的字段会写成 unknown,因为无法从数据里推断它到底是什么类型;勾选后会输出 string | null 这样的联合类型。是否允许 null 取决于你的后端约定,不确定时先按默认输出再手工调整更稳妥。