TypeScript 如何做 JSON 类型
在日常开发中，我们经常要处理接口返回的 JSON 数据、本地存储的 JSON 配置，有时候还得自己生成标准的 JSON 结构。这些场景里，如果数据格式错了，轻则功能出 bug，重则导致整个页面崩溃。那有什么办法能提前发现问题呢？这时候 TypeScript 就能帮上大忙——它能给 JSON 加上“类型保镖”，让你在写代码时就知道什么样的 JSON 才是合法的。
先搞懂：为什么要给 JSON 加类型
举个生活化的例子：你点外卖备注“少放辣”，商家能理解，但如果备注写成“少放××（不明符号）”，厨房肯定搞错。JSON 就像这个备注，本身是“无类型”的纯文本，你得告诉 TypeScript“这个 JSON 应该长什么样”，它才会帮你盯着：比如订单的“总价”必须是数字、“收货人”必须是字符串，要是哪天接口返回的“总价”变成了“一百块”这种文字，TypeScript 会立刻报错，不会等用户发现页面付款按钮点不了才出问题。
最实用的3种给 JSON 加类型的方法
用接口（Interface）定义 JSON 的结构
这是最常用的方式，适合大多数普通 JSON。比如你要处理一个用户信息的 JSON，它应该有“姓名”“年龄”“是否会员”这三个字段，就可以这么写：
`typescript
// 定义一个符合用户JSON的接口
interface UserJson {
name: string; // 姓名是字符串
age: number; // 年龄是数字
isVip: boolean; // 是否会员是布尔值
}
// 把接口套到JSON数据上
const userData: UserJson = {
name: "小明",
age: 28,
isVip: true
};
`
如果哪天不小心把age写成字符串"28"，TypeScript 会直接标红报错，提醒你格式不对，不用等到运行才找问题。
用类型别名（Type Alias）应对复杂场景
如果 JSON 结构有嵌套、或者可选字段，用类型别名会更灵活。比如用户的 JSON 里还有“收货地址”这个嵌套对象，而且可能没填（可选）：
`typescript
// 用类型别名定义嵌套结构
type AddressJson = {
city: string;
street: string;
};
type UserJson = {
name: string;
age: number;
address?: AddressJson; // 加?表示这个字段可选，不是必须的
};
// 可以省略可选的address字段
const userData: UserJson = {
name: "小红",
age: 25
};
`
这种方式特别适合处理多层嵌套的复杂 JSON，比单独写多个接口更简洁。
用泛型（Generic）处理批量的 JSON 数据
如果要处理一批结构相同的 JSON，比如接口返回10个用户的列表，用泛型能让代码更通用。比如：
`typescript
// 定义一个通用的列表类型，里面的每个元素都符合UserJson
type UserListJson = {
list: UserJson[]; // 数组里的每一项都是UserJson
total: number; // 总条数
};
// 符合这个结构的JSON数据就不会错
const userList: UserListJson = {
list: [
{ name: "小刚", age: 30, isVip: false },
{ name: "小丽", age: 26, isVip: true }
],
total: 2
};
`
要是你想把用户列表换成商品列表，只要把泛型里的UserJson换成GoodsJson就行，不用重新写一整套结构定义。
注意2个容易踩的小坑
第一，不要直接用JSON.parse后的any类型。很多人图省事，直接写const data: any = JSON.parse(response)，这样 TypeScript 就失去了类型检查的作用，等于白加了类型。第二，可选字段不要乱用undefined，比如如果某个字段真的可能不存在，一定要加?标记，而不是写成age?: number | undefined，前者更简洁规范。
给 JSON 加上 TypeScript 类型，本质是提前给数据“签合同”——你告诉 TypeScript 数据该长什么样，它就会全程盯着，帮你挡住绝大多数格式错误，让开发少踩坑、代码更稳。