如何自动将 JSON 转换为 TypeScript 接口（开发者友好指南）

为什么我们甚至需要 TypeScript 接口来处理 JSON？

当你的应用调用 API 时，响应几乎总是 JSON。但 JSON 是动态的——它不会告诉你：

• 哪些键是必需的
• 每个值的类型是什么
• 嵌套对象的结构是什么样的
• 数组应该包含什么

没有接口：

❌ IDE 无法自动补全

因此，TypeScript 接口充当了一种契约。

Sample JSON

{
  "id": 101,
  "name": "Sourav",
  "email": "sourav@example.com",
  "skills": ["Angular", "Node.js"],
  "profile": {
    "followers": 1200,
    "verified": true
  }
}

Manual Conversion

export interface Root {
  id: number;
  name: string;
  email: string;
  skills: string[];
  profile: Profile;
}

export interface Profile {
  followers: number;
  verified: boolean;
}

好？是的。
现在让我们自动化它。

Online Converters

如果你只想快速得到一个干净的接口，使用在线转换器。

1. 将 JSON 粘贴到左侧。
2. 工具会检测：
   • 数值、布尔、字符串、null、数组
   • 自动生成子接口
   • 深层嵌套
   • 正确的 TypeScript 格式
3. 不会把数据发送到服务器（仅客户端）。

Ideal Use Cases

• 配置文件
• 表单 schema
• 数据库文档
• Mock 数据

CLI Tools

QuickType

npm install -g quicktype

Convert a JSON file

quicktype data.json -o types.ts

Convert directly from a URL

quicktype https://api.example.com/user -o user.ts

Pros

• 非常适合自动化
• 支持多种语言
• 在 CI/CD 流水线中有用

Cons

• 比在线工具更复杂
• 对小任务来说有点大材小用

VS Code Extensions

如果你在 VS Code 中工作，安装 JSON to TS 扩展。

Usage

1. 复制 JSON。
2. 打开任意 TypeScript 文件。
3. 按 Ctrl + Shift + Alt + V。

接口会自动出现——对前端开发者尤其友好，特别是在 Angular 与 React 项目中。

Advanced Tip — Convert Nested Arrays Properly

Example JSON

{
  "products": [
    { "id": 1, "name": "Laptop", "price": 999 },
    { "id": 2, "name": "Mouse", "price": 29 }
  ]
}

Generated Interfaces

export interface Root {
  products: Product[];
}

export interface Product {
  id: number;
  name: string;
  price: number;
}

好的转换器会检测重复模式并创建统一的接口。

Handling Edge Cases

When to Use Automatic Tools

• 你的 API schema 经常变动。
• 你使用 GraphQL（请改用 GraphQL 专用生成器）。
• 你的后端已经提供了类型化的 schema。
• 你使用运行时校验库，如 Zod、Yup 或 Joi。

自动化工具很棒，但它们不能取代判断。

Conclusion

手动将 JSON 转换为 TypeScript 接口已经过时、慢且没有必要。

• 秒级自动生成接口
• 节省时间
• 减少错误
• 提升类型安全
• 加快开发速度

无论你更喜欢：

• 在线工具 – 快速且可视化
• CLI 实用程序 – 可脚本化、适配流水线
• VS Code 扩展 – 行内即时

如果你每天都在与真实的 API 打交道，这套工作流将是救命稻草。