在 JavaScript 语言中，对象是用来存储键值对的数据结构。ES12 中，新增了一个称为 Record 类型的数据结构，它是一种由固定数量的属性组成的对象，它有助于在类型定义中同时定义属性名称和类型。
Record 类型的基本使用方法
在 JavaScript 中，我们通常使用对象来表示一个实体。每个对象通常由一组名称和值组成的键值对表示。在 Record 类型中，我们可以通过一个接口描述对象的结构，而不是通过一个对象来定义。
Record 类型可以像下面这样定义一个类型：
type Person = Record<string, any>
在上述例子中，我们使用了通配符 any 来表示任意类型。接下来，我们可以使用 Person 类型来定义一个对象：
const john: Person = { name: 'John', age: 23 }当然，我们也可以定义一个更为复杂的类型，如下所示：
// javascriptcn.com 代码示例
type Employee = {
id: number
name: string
email: string
phone: string
}
type EmployeeRecord = Record<number, Employee>
const employees: EmployeeRecord = {
0: { id: 0, name: 'Tom', email: 'tom@example.com', phone: '123-555-4567' },
1: { id: 1, name: 'Jerry', email: 'jerry@example.com', phone: '123-555-8901' },
}在上述例子中，我们首先定义了一个 Employee 类型，表示了一个雇员的基本信息。我们还定义了一个 EmployeeRecord 类型，用于定义一个由 Employee 对象组成的集合。我们可以将多个 Employee 对象组合在一起来创建一个 EmployeeRecord 对象。在这个例子中，我们定义了两个雇员对象，并将它们分别分配给了 0 和 1 这两个键。
Record 类型的高阶使用方法
在 Record 类型中，我们可以采用高阶类型的思想来定义更为复杂的数据结构。如下所示：
// javascriptcn.com 代码示例
type Person = {
name: string
age: number
email: string
}
type MutableRecord<K extends keyof any, T> = {
[P in K]: T
}
type MutablePerson = MutableRecord<keyof Person, Person[keyof Person]>
const john: MutablePerson = { name: 'John', age: 23, email: 'john@example.com' }在上述例子中，我们首先定义了一个 Person 类型，表示了一个人的基本信息。然后，我们使用思想定义了一个 MutableRecord 类型，该类允许我们将一个类型的每个属性都创建为可变属性。最后，我们定义了一个 MutablePerson 类型，它使用了我们刚刚定义的 MutableRecord 类型，并将 Person 对象的每个属性都定义为可变的。
Record 类型在业务场景中的应用
在实际业务中，我们可以通过 Record 类型来定义一些与业务相关的数据集，比如说下单流程中某商品的基础信息：
// javascriptcn.com 代码示例
type BaseProduct = {
id: number
name: string
price: number
}
type OrderProductRecord = Record<number, { base: BaseProduct, quantity: number }>
const orderProducts: OrderProductRecord = {
0: { base: { id: 1001, name: '苹果', price: 5.5 }, quantity: 10 },
1: { base: { id: 1001, name: '橘子', price: 2.5 }, quantity: 5 },
}在上述例子中，我们定义了一个 BaseProduct 类型，表示一种商品的基本信息。接下来，我们定义了一个 OrderProductRecord 类型，它表示一个订单中的商品信息。其中，每个商品对象由一个 BaseProduct 对象和一个数量组成。最后，我们通过 OrderProductRecord 类型来定义一个 orderProducts 对象，这个对象包含了苹果和橘子两种商品的信息。
总结
在本文中，我们详细介绍了 ES12 中新增的 Record 类型，展示了它的基本使用方法以及使用高阶类型去定义更为复杂的数据结构。我们还演示了 Record 类型在业务场景中的应用场景，希望这些内容可以对前端开发同学有所指导作用，帮助大家快速理解 Record 类型的基本特性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65378ef07d4982a6eb01c496