在前端开发中，我们经常需要使用 JavaScript 来操作数据，但是纯 JavaScript 对于数据结构的类型约束比较弱，也无法提供静态类型检查。为了解决这个问题，ES12 中新增了两个数据类型，分别是 Record 和 Tuple。
Record
Record 是一个集合类型，用于描述一个由键值对组成的数据结构。它的语法如下：
type Record<K extends keyof any, T> = {
[P in K]: T;
};其中，K 表示键的类型，T 表示值的类型。我们可以使用它来约束一个由特定类型的键和值组成的对象。比如，我们可以定义一个表示用户的对象类型：
type User = Record<"name" | "age" | "gender", string>;
上面的代码表示一个对象拥有三个属性，分别是 name，age 和 gender，它们的取值都是字符串类型。我们可以使用这个类型来创建一个符合规范的用户对象：
const user: User = {
name: "张三",
age: "18", // 注意，这里应该是数字类型
gender: "男",
};需要注意的是，Record 并没有限制对象的长度和属性可选和必选的问题。如果我们需要更复杂的约束，可以使用 TypeScript 提供的额外语法。
Tuple
Tuple 是一个数组类型，用于约束一个固定长度和类型的数组。它的语法如下：
type Tuple<T extends any[], U> = T extends [infer A, ...infer B]
? Tuple<B, U> & Record<number, U> & { length: T["length"] }
: { length: 0 };其中，T 表示数组的类型，U 表示数组中元素的类型。我们可以使用它来限制一个包含固定类型和长度的数组：
type RGB = Tuple<[number, number, number], number>;
上面的代码表示一个包含三个数字的数组，且所有元素都是数字类型。我们可以使用这个类型来创建一个符合规范的数组：
const color: RGB = [255, 255, 255];
需要注意的是，Tuple 可以自动推断出数组的长度和元素的类型。如果我们尝试创建一个长度不符合规范的数组，TypeScript 将会自动给出提示。
总结
ES12 的 Record 和 Tuple 为我们提供了更强的类型约束和静态类型检查，可以使我们的代码更加健壮和可维护。当然，在实际开发中，我们需要根据具体场景选择合适的数据类型。希望本文能够为你带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5c711f6b2d6eab3e96caf