JSON 转 TypeScript
转换器从样例 JSON 自动推断生成 TypeScript 接口，处理嵌套对象、数组合并与可选字段，可自定义根接口名，适合给后端接口补类型。
2 个接口
JSON
TypeScript
interface Profile {
age: number;
city: string;
}
interface RootObject {
id: number;
name: string;
active: boolean;
roles: string[];
profile: Profile;
lastLogin: null;
}关于 JSON 转 TypeScript
从后端拿到一段 JSON 响应后，前端往往要手写对应的 TypeScript 接口，既枯燥又容易和真实数据对不上。本工具在浏览器本地解析样例 JSON，递归推断出嵌套对象、数组元素和字段类型，自动生成 interface（或 type）定义。例如给定 {"name":"Alice","age":30,"tags":["a","b"]}，会自动推断出 interface Root { name: string; age: number; tags: string[] }，字段类型无需手写。生成后建议再核对可选字段与联合类型，自动推断对可空字段的处理未必符合业务预期；把定义放进项目时配合格式化工具整理一下，接口文件会更整洁，后端字段变更时重新生成一次也能快速同步结构。
使用方法
- 打开 JSON 转 TypeScript 工具页面
- 根据需求输入或粘贴数据到输入区域
- 查看实时处理结果，使用复制按钮获取输出
使用场景
- 对接后端接口 — 把接口返回的 JSON 粘进来，立即得到可直接用于前端的类型定义，避免手写出错。
- 生成 DTO 类型 — 为 API 请求/响应体快速生成数据传输对象类型，统一前后端字段契约。
- 补全第三方 SDK 类型 — 第三方接口没有类型声明时，用样例响应反推一套可用的 interface。
- Mock 数据建模 — 根据 Mock JSON 生成类型，让测试和组件 props 都有类型约束。
- 重构旧项目 — 把散落的 any 类型用真实 JSON 还原为精确接口，提升类型安全。
常见问题
嵌套对象会怎么处理？
每个嵌套对象都会被提取为独立的命名 interface，并在父接口中引用，保持结构清晰、可复用。
数组里类型不一致怎么办？
工具会合并数组中所有元素的类型，生成联合类型（如 (string | number)[]），尽量贴合真实数据。
null 字段会推断成什么？
值为 null 时会推断为 null 类型。若你的字段可能为空，建议拿到非空样例再生成更精确的类型。
interface 和 type 有什么区别？
多数场景两者可互换。勾选「使用 type」会输出 type 别名，适合需要联合类型或交叉类型扩展的场景。
生成后还能调整吗？
当然，输出是标准 TS 代码，复制到项目后可自由重命名、加注释或改成可选字段。也可配合本站「JSON 格式化」先整理数据。
作者：Dennis · 全栈开发者 · contact@oltool.net最后更新：2026 年 7 月
广告
评论与讨论
评论仅保存在你的浏览器本地，切换设备后不可见。配置 Giscus 后可支持云端评论。