JSON 转 TypeScript — 从 API 响应生成接口类型
粘贴 JSON 示例，即刻生成带嵌套对象和数组推断的 TypeScript interface 或 type alias。无需注册，无需服务器，完全浏览器端运行。
为什么要从 JSON 生成类型？
TypeScript 的强大来自其类型系统，但手动为 API 响应编写接口既繁琐又容易出错。字段名的一个拼写错误会创建与实际数据不匹配的类型，TypeScript 无法帮你防止由错误类型引起的运行时错误。
本工具接受真实 JSON 样例——来自你的 API、数据库导出或文档——生成与实际数据结构匹配的准确 TypeScript 接口。嵌套对象成为独立命名的接口，数组得到正确的元素类型。
生成的代码可以直接粘贴到项目中。以此为起点，然后细化：标记可选字段、添加 JSDoc 注释，或调整类型名称以匹配你的命名约定。
使用方法
- 在输入区粘贴或输入 JSON 样例。已预加载一个示例供体验。
- 设置根类型名称（默认为 "Root"）。建议使用有意义的名称如 "UserResponse"。
- 切换 "使用 type 替代 interface" 选择输出格式。
- 切换 "标记字段为可选" 为所有属性添加 ?（适用于部分响应）。
- TypeScript 输出实时更新。点击复制即可获取。
使用场景
为 API 响应添加类型
调用接口，复制 JSON 响应，粘贴到这里。几秒内得到类型安全的 interface，无需逐字段手写。
新项目启动
开始一个消费已有 API 的新前端？从样例数据生成所有响应类型，在写第一个组件之前就准备好。
JavaScript 迁移到 TypeScript
有正常运行的 JS 代码，console.log 输出展示了数据结构。粘贴这些输出生成迁移所需的类型。
文档和代码审查
从 API 文档示例生成接口，验证手写类型是否匹配实际契约。
使用建议
使用有代表性的样例
粘贴包含所有可能字段的响应。如果某些字段仅在特定条件下出现，合并多个响应或生成后标记为可选。
为根类型起有意义的名称
不要留默认的 "Root"。使用 "UserProfile"、"OrderListResponse" 等名称——未来的你会感谢现在的你。
仔细检查数组类型
如果数组包含不同结构的对象，生成器会创建联合类型。这可能意味着你的数据有值得调查的不一致。
生成的类型是起点
添加 JSDoc 注释，标记真正可选的字段，考虑对状态码等值使用枚举。生成器提供结构，你添加语义。
示例
简单 API 响应
包含基本类型和数组的扁平用户对象。
Input
{"id":1,"name":"Jane","email":"jane@example.com","roles":["admin","editor"]}Output
export interface User {
id: number;
name: string;
email: string;
roles: Array<string>;
}嵌套对象
包含嵌套 profile 对象的响应会生成独立接口。
Input
{"id":1,"profile":{"bio":"工程师","avatar":"https://example.com/img.jpg"}}Output
export interface User {
id: number;
profile: UserProfile;
}
export interface UserProfile {
bio: string;
avatar: string;
}功能特点
- 编辑 JSON 时实时生成类型
- 嵌套对象自动成为命名接口
- 数组元素类型推断，支持联合类型
- 可切换 interface 或 type alias 输出
- 可选字段模式，适用于部分/可空数据
- 可配置根类型名称
常见问题
能处理对象数组吗？
能。如果 JSON 包含对象数组，工具从第一个元素推断元素类型并生成命名接口。
null 值怎么处理？
null 值被类型化为 "null"。如果字段可能是 string 或 null，生成后需手动改为 "string | null"。
能从 JSON Schema 生成吗？
本工具从 JSON 样例（实际数据）生成，不支持 JSON Schema 定义。Schema 转 TypeScript 请使用 json-schema-to-typescript 等 npm 包。
生成的代码可以直接用于生产吗？
是很好的起点。通常还需添加 JSDoc 注释、标记可选字段、重命名嵌套类型以匹配命名约定。
数据会被发送到服务器吗？
不会。转换完全在浏览器中使用本地 JavaScript 运行，无数据传输。可安全用于内部 API 响应和专有数据结构。