轻工具

JSON 转 TypeScript

把一段 JSON 直接生成 TypeScript 接口，嵌套对象与数组自动拆成独立类型。

支持对象、数组与嵌套结构，字段顺序按原样保留

生成 Root、RootItem 这类接口名

快捷操作
输出选项
interface 数量0
总行数0

    

    

      
    

  






  
使用说明

  
    
    
  1. 把接口返回的 JSON 粘贴到输入框，右上角可以点「载入示例」先看效果。
    2. 
    
  2. 根类型名决定最外层接口的名字，嵌套对象会拼上字段名，例如 RootAddress。
    3. 
    
  3. 数组里是对象时，所有元素的字段会合并成一个接口，缺失的字段标成可选。
    4. 
    
  4. 勾选 readonly 会给每个字段加只读修饰，适合生成配置类型。
    5. 
    
  5. 生成结果可以一键复制，粘贴到 .ts 文件或类型声明里即可使用。
    6. 
  






  
常见问题

  

    数组元素结构不一致会怎样？
    
同一数组里的对象会合并字段，只在部分元素里出现的字段标为可选，类型取所有出现值的联合。这样生成的接口能覆盖全部元素，不会因为个别字段缺失而报错。

  

  

    null 和空数组怎么处理？
    
null 生成 null 类型；若数组里同时有对象与 null，会生成「接口 | null」的联合。空数组没有元素可推断，输出 unknown[]，建议补一个样例或手动改成具体类型。

  

  

    数字会生成 number 还是字面量类型？
    
统一生成 number，不推断字面量。JSON 里的 1、2、3 可能来自枚举，猜字面量容易把类型收得过窄，保留 number 更安全，需要时再手动改成联合类型。

  

  

    生成的代码会上传吗？
    
不会。解析与生成全部在浏览器里完成，输入的 JSON 与输出都只存在于当前页面，刷新即清空，也不会写入本地存储。

  




          
          

    
使用步骤
  1. 粘贴真实的 JSON
    把接口响应或配置文件整段粘进输入框，结构越接近线上数据，生成的类型越准。
  2. 设定根类型名
    根类型名决定最外层接口的名字，嵌套对象会拼上字段名，例如 RootAddress 与 RootOrdersItem。
  3. 勾选输出选项
    需要给其他模块使用时勾上 export，配置类数据可以再加 readonly，输出会同步变化。
  4. 检查可选字段
    数组里部分元素缺少的键会带问号，确认这些字段在业务上真的可缺，而不是接口偶尔抽风。
  5. 复制到项目
    点复制类型，粘贴进 .ts 文件即可。生成结果只是起点，字段含义与联合类型仍需人工收紧。

    
工具详细介绍
接口返回的 JSON 只是一段数据，要在 TypeScript 里安全使用，得先给每个字段定类型。手写接口容易漏字段，接口改名后更难同步，前端只能靠 console.log 猜结构。把真实响应粘进来生成一次，嵌套对象与数组都会拆成独立接口，字段名与顺序和原数据一致。生成结果可以直接粘进项目，省掉一轮机械劳动，也方便和同事对齐字段，减少口头沟通，值得花这十分钟。
本页先把 JSON 解析成内存对象，再递归推断每个值的类型。数组元素是对象时会合并字段，只在部分元素里出现的键标成可选，类型取所有值的联合。null 保留成 null，空数组给 unknown[]。勾选 readonly 与 export 可以改变输出风格，根类型名决定最外层接口叫什么。所有计算都在浏览器里完成，数据不会上传，关掉页面即清空，刷新也不会留下记录，也不占空间。

    
原理与背景
类型推断只能看见样本里的值。样本里没有 null，生成结果就不会有 null，线上却可能返回空值。数字统一推成 number，不会猜字面量联合；数组里混着字符串与数字时会生成联合类型，但顺序与去重规则只按出现次数。JSON 本身不区分整数与小数，也不带日期类型，这些语义只能靠人补充。样本覆盖得越全，生成结果越接近真实契约，空白之处只能靠人补。
工程上通常把生成的接口当草稿。第一次对接 API 时用它省时间，随后按业务收紧字段、补注释、拆出公共类型。运行时校验仍然不能省，TypeScript 只在编译期生效，接口返回脏数据时类型断言不会拦住。可以配合 zod 或 valibot 写一份 schema，从 schema 反推类型，让编译期与运行时共用一份定义。类型只描述形状，不描述含义，字段的业务规则仍要写进注释或校验。

    
典型使用场景
  1. 对接第三方接口
    文档只给了示例响应，没有类型定义。把示例粘进来生成接口，先让编辑器有补全，再拿真实响应核对可选字段，半天就能把对接代码写完，不用逐个字段手敲。
  2. 迁移旧 JS 项目
    老项目里到处是 data.foo.bar，改成 TypeScript 时无从下手。先从几个核心接口的响应生成类型，替换掉 any 与手写声明。编译报错会指出哪些字段其实不存在，迁移范围立刻清晰，也方便排优先级。
  3. 写测试用的假数据
    单元测试需要构造符合接口的 mock 对象。先生成接口，再按类型填假数据，编辑器会提示缺了哪个字段，mock 与真实响应不容易走样，接口加字段时测试也会跟着报错。

    
使用技巧
  • 用两三条真实响应分别生成再对比，能发现只在某些分支里出现的可选字段。
  • 生成后把明显是枚举的字符串字面量收成联合类型，比保留 string 更能拦住拼写错误。
  • 日期字段在 JSON 里是字符串，生成后手动改成 Date 或带注释的 ISO 字符串类型，避免误用。

    
注意事项
  • 把生成结果当最终类型
    样本里没出现的字段不会被推断，接口新增字段后类型也不会自动更新。把生成结果当起点，按文档与真实响应补齐，并定期重新生成对比差异，一份差异清单比肉眼可靠。
  • 忽略可选字段的含义
    问号只代表样本里缺失，不代表业务允许为空。把可缺字段逐个确认，该必填的在服务端校验，否则前端到处写空值判断，类型再准也挡不住脏数据。
  • 忘了运行时校验
    类型断言不会检查网络返回值，接口出错时照样按接口形状使用，报错会出现在很远的地方。关键入口加一层 schema 校验，错误能在边界处被抓到，排查时间会短很多。

  

          
相关工具