JSON 转 TypeScript 接口
粘贴 JSON,即可生成 TypeScript 接口:嵌套对象成为具名类型,数组元素会合并并标出可选字段,null 变成联合类型。
在所有样本中都为 null 的字段会被标为 null 类型,待确定真实类型后请替换。
粘贴一段 JSON 响应,就能得到可直接放进代码的 TypeScript 接口。嵌套对象会成为各自独立的具名接口,对象数组会被合并,其中部分元素缺少的字段会标为可选,偶尔为 null 的值会变成 | null 联合类型。转换在浏览器中进行,私有的 API 数据不会被上传到任何地方。
使用方法
- 粘贴一份有代表性的 JSON 样本,最好是数组中包含多个元素的样本。
- 设置顶层类型的名称(默认为 Root)。
- 选择 interface 或 type 别名,以及是否添加 export。
- 复制结果,并按需修改生成的类型名称。
计算公式
string → string · number → number · true/false → boolean · null → null · [ … ] → T[] · { … } → interface
会检查每一个值,并合并同一位置上出现的类型。只在数组中部分对象里出现的键会加上 ?(可选)。同一位置出现不同类型时,会变成 string | number 这样的联合类型。形状相同的对象共用一个接口;数组元素的类型名取自键的单数形式(orders → Order)。重复的键和超出有限安全整数范围的数字会被拒绝,其他小数遵循 JavaScript 精度。
示例
示例中的用户记录会生成三个声明。Root 包含 id: number、name: string、tags: string[]、address: Address、orders: Order[] 和 manager: null。Address 包含 street、city 和 postcode,都是字符串。Order 包含 id: string、total: number、items: number 和 coupon?: string——因为只有第二个订单有优惠券,所以是可选的。
常见问题
应该用 interface 还是 type?
对于普通的对象结构,两者都可以。接口可以被扩展,也能跨声明合并;type 别名还能描述联合类型和元组。许多代码风格指南建议对象结构使用 interface。
为什么有的字段被标为可选?
因为数组中至少有一个对象缺少该字段。如果 API 总是会返回它,请提供更完整的样本数据,或手动删去 ?。
为什么有的字段类型是 null?
因为所有样本值都是 null,没有其他可推断的信息。请将其替换为真实类型,例如 string | null。
它会在运行时检查我的数据吗?
不会。TypeScript 类型在编译后就被擦除了。若要在运行时校验 API 响应,请使用 Zod 之类的模式库或 JSON Schema 校验器。
资料来源
最后更新:
包含这些输入的页面地址: https://kakao.mobile/zh/tools/json-to-typescript-tool/
引用此工具
kakaoCalc. (2026, November 8). JSON 转 TypeScript 接口. https://kakao.mobile/zh/tools/json-to-typescript-tool/
“JSON 转 TypeScript 接口.” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/json-to-typescript-tool/.