JSON 转 TypeScript 工具

粘贴 JSON，即可为每个嵌套对象生成 TypeScript 接口，直接放进项目中使用。

语言:

类型名称:

输入 (JSON)

输出 (typescript)

从 JSON 生成 TypeScript 接口

手动为 API 响应编写类型既耗时又容易出错。本工具读取 JSON 样例，为每种对象结构生成一个导出的 interface：嵌套对象会生成独立命名的接口，数组会生成 string[] 这样的类型化数组，数字、字符串和布尔值分别映射为 number、string 和 boolean。输出只包含类型声明，没有任何运行时代码，不会增加打包体积。

使用方法

粘贴你要对接的 API 的真实响应，例如从浏览器开发者工具的 Network 面板中复制。
将类型名称设置为根对象所代表的含义，例如 User 或 ApiResponse。
把接口复制到 types.ts 文件中，并为 fetch 的结果添加类型注解，例如 const user: User = await res.json()。

常见问题

生成的是 interface 还是 type 别名？: 生成的是导出的 interface。用于描述 API 数据时，它与对象类型别名的效果相同，复制后可以随意重命名或改写为 type。
如何生成可选属性（field?: string）？: 生成器只能根据样例推断类型。在数组中放入多个对象，并让其中一部分省略该字段，这个属性就会被生成为可选。如果某个字段在样例中始终为 null，它会被推断为 null 类型，所以如果你知道它的实际类型，请在样例中填入真实值。
这些接口会在运行时校验数据吗？: 不会。TypeScript 类型在编译时会被擦除，格式错误的响应并不会抛出异常。如果需要运行时校验，可以用 JSON Schema 工具生成 Schema 并据此校验，或者使用专门的校验库。

示例：JSON 转 TypeScript

输入 JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "email": "ada@example.com",
  "roles": ["admin", "editor"],
  "profile": { "bio": "Mathematician", "website": "https://example.com" }
}

生成的 TypeScript 代码（User）

export interface User {
    id:      number;
    name:    string;
    email:   string;
    roles:   string[];
    profile: Profile;
}

export interface Profile {
    bio:     string;
    website: string;
}