跳至正文

JSON to TypeScript Generator

自动将JSON数据转换为TypeScript接口的工具。可以类型安全地使用API响应、配置文件等JSON数据。

JSON Input

TypeScript Output

TypeScript interface will appear here...

主要功能​

  • JSON自动解析和接口生成
  • 支持嵌套对象
  • 数组类型自动检测
  • 支持可选属性
  • 接口名称自定义
  • 5个示例模板

使用方法​

1. 基本使用​

{
  "name": "John",
  "age": 30
}

↓

interface Root {
  name: string;
  age: number;
}

2. 嵌套对象​

{
  "user": {
    "profile": {
      "name": "John"
    }
  }
}

↓

interface Root {
  user: User;
}

interface User {
  profile: Profile;
}

interface Profile {
  name: string;
}

3. 数组​

{
  "users": [
    {"id": 1, "name": "John"}
  ]
}

↓

interface Root {
  users: User[];
}

interface User {
  id: number;
  name: string;
}

应用场景​

生成API响应类型​

// 粘贴从API收到的JSON响应
// 立即生成TypeScript接口
fetch('/api/users')
  .then(res => res.json())
  .then((data: UserResponse) => {
    // 类型安全使用
  })

配置文件类型​

// 将config.json的结构转换为接口
interface Config {
  apiUrl: string;
  timeout: number;
  features: Feature[];
}

提示​

  1. 可选属性: 当某些字段是可选的时，勾选"Use Optional Properties"
  2. 接口名称: 根据用途更改名称（例：UserResponse、ConfigData）
  3. 复杂JSON: 从示例模板开始并进行修改

相关工具​