功能介绍
JSON 转 TypeScript 工具读取一段 JSON 示例(比如接口返回值或配置文件),生成描述它的 TypeScript 接口。不用再手写每个字段,粘贴一份真实返回数据,就能得到可以直接放进代码的类型,用于 fetch 结果、Redux 状态或测试数据。
生成器会查看每一个值,而不只是第一个。数字变成 number,文本变成 string,嵌套对象生成独立接口,数组元素会合并:只在部分元素里出现的字段标为可选,有时为 null 的字段标为可空。
使用方法
- 把 JSON 粘贴到输入框、上传
.json文件,或点「示例」。 - 设置根类型名并选择风格:
interface或type、null 写成| null还是可选字段、是否加readonly、是否给每个声明加export。 - 复制 TypeScript,或下载为
.ts文件。
JSON 格式错误时会提示出错的行和列,方便马上修正示例。
示例
这段 JSON:
{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }
会生成以下声明:
export interface Root {
id: number;
name: string;
tags: string[];
manager: Manager;
}
export interface Manager {
id: number;
email: null;
}
小贴士
- 一份示例只能体现它包含的内容。如果某个字段可能是字符串也可能是 null,请两种情况各给一个例子,或者把多份示例放进一个数组里让它们合并。
- 不是合法标识符的字段名(比如 first-name)会加上引号,保证输出总能编译。
- 结果是一个起点。如果你比示例了解得更多,可以把字符串字段收窄为字面量联合类型或
Date。 - 需要 Go 代码?JSON 转 Go 工具用同样的推断逻辑生成带 json 标签的结构体。
常见问题
› 嵌套对象怎么处理?
每个嵌套对象都会生成一个独立的命名接口,名字取自字段名的 PascalCase 形式,比如 address 字段对应 Address 接口。结构完全相同的对象共用一个接口,名字冲突时加数字,比如 Address2。
› 数组的类型怎么确定?
数组里的所有元素会合并成一个元素类型。对象数组会变成以字段名单数形式命名的接口数组,比如 orders 对应 Order[]。混合数组生成联合类型,比如 (string | number)[];空数组生成 unknown[]。
› 什么时候字段会被标为可选?
当它在数组中的部分对象里缺失时。每个对象都有但有时为 null 的字段,默认写成 T | null;把 null 值选项切换为可选,就会去掉 null,改为在字段名后加问号表示可选。
› 应该选 interface 还是 type?
两者都能描述同样的对象结构。interface 可以继承和合并,很多代码规范推荐用它描述对象类型;type 别名更适合之后和联合类型、映射类型组合使用。按项目已有的习惯选择即可。
› 我的 JSON 会被发送到服务器吗?
不会。类型推断在浏览器中完成,可以放心粘贴真实的接口返回数据。