JSON 转 TypeScript 类型工具

粘贴 JSON 示例数据,自动生成 TypeScript Interface 与类型定义,支持嵌套对象、数组元素类型推断与 null 联合类型。可自定义根类型名称,全部在浏览器本地转换。

JSON 输入

如何使用

  1. 1粘贴代表性 JSON 样本

    使用能覆盖主要字段的 API 响应或 mock 数据。样本越完整,推断出的类型越准确。

  2. 2设置根类型名并生成

    在「根类型名」输入框填写如 User、ApiResponse 等名称,点击「生成类型」。

  3. 3复制 TypeScript 定义

    右侧输出面板显示生成的 interface,一键复制到项目中并根据需要微调 optional 字段。

类型生成示例

JSON 输入
{
  "id": 1,
  "name": "Alice",
  "tags": ["admin"],
  "meta": { "active": true }
}
生成的 TypeScript(示意)
interface Root {
  id: number;
  name: string;
  tags: string[];
  meta: {
    active: boolean;
  };
}

适用场景

  • 对接 REST API

    用真实响应样本生成接口类型,减少手写 interface 的时间与拼写错误。

  • Mock 数据与前端开发

    从 fixture JSON 快速得到类型定义,配合 React 组件 props 或状态类型使用。

  • 迁移 JavaScript 项目到 TypeScript

    将现有 JSON 配置或数据样本转为类型,作为渐进式迁移的起点。

类型推断说明

  • interface 与嵌套对象

    顶层与嵌套对象会递归生成 interface,嵌套层级深时自动拆分为独立类型名。

  • 数组元素类型推断

    根据数组内元素值推断 string[]、number[] 或对象数组;混合类型会合并为联合类型。

  • null 与联合类型

    字段值为 null 时会生成 string | null 等联合类型;多种类型并存时同样合并。

  • 示例应覆盖可选字段

    工具按样本中出现过的键推断类型。若某字段仅在部分记录存在,样本中应包含该字段,生成后再手动标记为可选(?)。

常见问题

生成的类型准确吗?
基于示例数据推断。字段可能为多种类型时会生成联合类型;建议用覆盖主要场景的样本。
interface 和 type 有什么区别?
本工具默认生成 interface。interface 可声明合并,type 更灵活地表达联合与交叉类型;生成后可按需改写。
缺少的字段会被推断为 optional 吗?
不会自动添加 ?。仅样本中出现的键会出现在类型中;可选字段需根据业务手动补充。
可以复制生成的代码吗?
可以,点击「复制类型」将 TypeScript 定义复制到剪贴板。
嵌套数组的对象类型如何处理?
会为数组中的对象元素生成独立 interface,并在数组字段上引用该类型。