前端接入一个新接口时，最枯燥的一步往往是照着 JSON 响应手写 TypeScript 类型。字段一多，很容易漏写、写错类型，或者忘记某个字段是可选的。
其实这一步完全可以自动化：给一段真实的 JSON 样本，工具就能推断出每个字段的类型，并生成对应的 TypeScript interface。下面先看它是怎么工作的，再讲清楚几种容易出错的边界情况。
一个最简单的例子
假设接口返回下面这段 JSON：
{
"id": 1001,
"name": "ToolGarden",
"isActive": true,
"tags": ["json", "pdf"],
"owner": {
"email": "hi@example.com",
"verified": false
},
"lastLogin": null
}根据字段的值，可以推断出对应的 TypeScript 类型。嵌套对象会被拆成独立 interface，数组会推断出元素类型：
interface Owner {
email: string;
verified: boolean;
}
interface Root {
id: number;
name: string;
isActive: boolean;
tags: string[];
owner: Owner;
lastLogin: null;
}类型是怎么推断出来的？
- 字符串 → string，数字 → number，布尔值 → boolean。
- 对象 → 独立的 interface，字段名作为类型名（如 owner → Owner）。
- 数组 → 元素类型加 []，例如字符串数组是 string[]。
- null → null（无法从单个 null 值推断出真实类型，需要人工补充）。
- 同名字段在不同对象里类型不同时 → 生成联合类型（如 string | number）。
几个容易出错的边界情况
1. 可选字段
单个 JSON 样本无法告诉工具“哪些字段可能缺失”。如果某个字段有时会返回、有时不返回，建议手动把它标成可选（在字段名后加 ?）。用包含多种情况的样本，或多个样本合并推断，可以减少这类遗漏。
2. null 与真实类型
像 lastLogin: null 这样的字段，工具只能推断成 null。实际业务里它多半是 string | null 或 number | null。拿到一份 lastLogin 有值的样本再生成，或手动改成联合类型，会更贴近真实接口。
3. 空数组和混合数组
空数组 [] 无法推断元素类型，通常会退化成 unknown[] 或 any[]。混合类型数组（如 [1, "a"]）会生成 (number | string)[]。数组能提供的样本元素越丰富，推断结果越准确。
生成类型时的实用建议
| 场景 | 建议做法 |
|---|---|
| 字段可能缺失 | 手动加 ? 标为可选，或用多份样本合并推断 |
| 字段值为 null | 改成 T | null（如 string | null） |
| 数组为空 | 手动指定元素类型，避免 any[] |
| 枚举类字符串 | 按需改成字面量联合类型（如 "draft" | "published"） |
| 样本不合法 | 先用 JSON 格式化工具校验，再生成 |
在浏览器本地生成，不上传接口数据
API 响应里经常带着 token、邮箱、用户 ID 等敏感信息，把它粘贴到会上传数据的在线工具并不安全。ToolGarden 的 JSON → TypeScript 工具在浏览器本地完成推断，样本不会上传到服务器，适合直接拿真实响应来生成类型。
总结
从 JSON 自动生成 TypeScript interface，能省下大量手写类型的时间，也能减少人为错误。真正需要你关注的，是样本无法覆盖的部分：可选字段、null 的真实类型和空数组。把这几点补齐，生成的类型就能直接放心用在项目里。