typescript - 10.高级类型 Recoed

在 TypeScript 中，Record 是一个内置的泛型工具类型（Utility Type），用于快速定义一个具有指定键类型和值类型的对象类型，本质上是对对象类型的一种简洁封装，避免了重复书写对象的键值类型定义。

一、基本语法

Record<K, T>

• K：表示对象的键的类型，必须是 string、number、symbol 或它们的联合类型（符合 JavaScript 对象键的合法类型）。
• T：表示对象的值的类型，可以是任意 TypeScript 类型（基本类型、自定义类型、接口等）。

二、核心作用

快速创建一个“键类型统一、值类型统一”的对象类型，替代繁琐的对象字面量类型定义。

三、使用示例

1. 基础用法

// 定义：键为 string 类型，值为 number 类型的对象
type NumberMap = Record<string, number>;// 合法的使用
const ageMap: NumberMap = {'zhangsan': 20,'lisi': 25,'wangwu': 30
};// 错误：值不是 number 类型
// const errorMap: NumberMap = { 'zhaoliu': '35' };

2. 结合字面量类型（限定键的范围）

这是 Record 最常用的场景之一，通过字符串字面量联合类型限定对象的键只能是指定的几个值：

// 限定键只能是 'home' | 'work' | 'school'
type AddressType = 'home' | 'work' | 'school';
// 定义：键为 AddressType 类型，值为 string 类型的对象
type AddressMap = Record<AddressType, string>;// 合法的使用
const userAddress: AddressMap = {home: '北京市海淀区',work: '上海市浦东新区',school: '广州市天河区'
};// 错误：缺少 'school' 键，或多出非指定键都会报错
// const errorAddress: AddressMap = { home: '深圳市南山区', work: '杭州市西湖区' };

3. 结合自定义类型（值为复杂类型）

值类型可以是接口、自定义类型等复杂类型：

// 定义用户信息的接口
interface UserInfo {name: string;age: number;
}// 定义：键为 number 类型（比如用户 ID），值为 UserInfo 类型的对象
type UserMap = Record<number, UserInfo>;// 合法的使用
const userList: UserMap = {1001: { name: '张三', age: 20 },1002: { name: '李四', age: 25 }
};

四、与普通对象类型的对比

1. 普通对象类型定义（繁琐）

type AddressMap = {home: string;work: string;school: string;
};

2. Record 定义（简洁）

type AddressType = 'home' | 'work' | 'school';
type AddressMap = Record<AddressType, string>;

当键的数量较多时，Record 的简洁性优势会更明显。

五、注意事项

1. K 的类型限制：K 必须是可作为对象键的类型（string/number/symbol 及其联合类型），否则 TypeScript 会报错：

   // 错误：boolean 不能作为对象键的类型
   // type ErrorRecord = Record<boolean, string>;
   

2. Record 是“全量键”类型：如果用字面量联合类型作为 K，则对象必须包含所有指定的键，不能少也不能多（除非使用可选键，可结合 Partial 工具类型）：

   type AddressType = 'home' | 'work' | 'school';
   // 结合 Partial 实现可选键
   type OptionalAddressMap = Partial<Record<AddressType, string>>;// 合法：可以只包含部分键
   const partialAddress: OptionalAddressMap = {home: '北京市海淀区'
   };
   

3. 与 object/{} 的区别：

   • object/{} 是宽泛的对象类型，无法限定键和值的类型；
   • Record<K, T> 是精确的类型，明确指定了键和值的类型，类型检查更严格。

六、在 Vue 中的常见场景

在 Vue 应用实例 API 中，app.config.globalProperties 和 app.config.optionMergeStrategies 的类型都用到了 Record：

// Vue 源码中对 globalProperties 的类型定义
interface AppConfig {globalProperties: Record<string, any>;
}

这里 Record<string, any> 表示 globalProperties 是一个“键为字符串、值为任意类型”的对象，符合全局属性的使用场景（比如注册 $api、$utils 等任意类型的全局属性）。

总结

Record 是 TypeScript 中用于快速定义键值对对象类型的工具，核心价值是简化类型定义、提高代码可读性，尤其适合需要限定对象键值类型的场景，是日常开发中使用频率极高的工具类型之一。