JSON 转 TypeScript

将 JSON 数据自动转换为 TypeScript 接口或类型定义

JSON 输入
行数: 1 | 字符: 0
TypeScript 输出
// 输入 JSON 后自动生成 TypeScript 类型定义
类型: 0 | 行数: 1

什么是 JSON 转 TypeScript?

JSON 转 TypeScript 是将 JSON 数据自动转换为 TypeScript 类型定义的工具。它分析 JSON 结构,生成对应的 interface 或 type 声明,帮助开发者在 TypeScript 项目中获得类型安全和代码提示。

使用方法

  1. 在左侧输入框粘贴 JSON 数据,或点击示例按钮加载示例
  2. 配置选项:设置根类型名称、选择 interface/type 风格、是否添加 export 等
  3. 右侧自动生成对应的 TypeScript 类型定义
  4. 点击「复制」按钮复制生成的类型定义到剪贴板
  5. 将类型定义粘贴到 TypeScript 项目中使用

使用实例

简单对象转换

输入 JSON:
{
  "name": "张三",
  "age": 28,
  "isActive": true
}

输出 TypeScript:
export interface Root {
  name: string;
  age: number;
  isActive: boolean;
}

嵌套对象转换

输入 JSON:
{
  "user": {
    "id": 1,
    "profile": {
      "avatar": "url",
      "bio": "简介"
    }
  }
}

输出 TypeScript:
export interface UserProfile {
  avatar: string;
  bio: string;
}

export interface User {
  id: number;
  profile: UserProfile;
}

export interface Root {
  user: User;
}

常见问题 (FAQ)

Q: 生成类型后如何使用?

A: 将生成的类型定义复制到 .ts 文件中,然后在代码中使用。例如:const data: Root = JSON.parse(response)

Q: interface 和 type 有什么区别?

A: interface 可以被扩展和实现,适合定义对象类型;type 更灵活,可以定义联合类型、交叉类型等。对于简单对象结构,两者功能相似。

Q: 如何处理数组类型的 JSON?

A: 工具会自动识别数组元素类型。如果是对象数组,会为数组元素生成单独的类型定义,然后使用 ItemType[] 表示数组。

Q: 生成的类型是否可以编辑?

A: 生成后可以自由编辑。建议根据实际需求调整类型名称、添加可选字段标记(?)、或修改部分字段的类型定义。