把 API 返回的 JSON 转成 TS 类型

调一个没类型定义的接口，any 满天飞最容易出 bug。把真实返回值抓出来，转成 interface 就行了。

更新于 2026-08-30 · 阅读约 3 分钟

从浏览器拿到 JSON

1. 打开 DevTools → Network，触发一次接口请求。
2. 点开该请求 → Response，复制 JSON 文本。
3. 粘进工具，点「生成 TS 类型」。

示例

{
  "code": 0,
  "data": {
    "list": [
      { "id": 1, "title": "文章A" },
      { "id": 2, "title": "文章B" }
    ],
    "total": 2
  }
}

得到：

export interface Root {
  code: number;
  data: {
    list: {
      id: number;
      title: string;
    }[];
    total: number;
  };
}

建议

• 用一份「完整」的返回（含分页、空列表也要各看一次）再生成，类型更稳。
• 把生成的 interface 命名成业务语义（ApiResp、Article），别留 Root。
• 若接口某些字段时有时无，可在样例里显式写成 null。

👉 打开工具，把你的接口返回值粘进去生成类型