TypeScript Record类型详解

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法，TypeScript 可以编译成纯 JavaScript，可以在任何浏览器、任何计算机和任何操作系统上运行，在 TypeScript 中，Record 类型是一种特殊的类型，它允许你创建具有特定属性名和类型的对象。

Record 类型简介

Record 类型是 TypeScript 4.2 版本引入的一个新特性，它允许你使用一组已知的属性名和它们的类型来创建一个新的对象类型，Record 类型可以让你更简洁地表示具有固定属性的对象，而不需要显式地定义每个属性的类型。

假设我们有一个具有两个属性 name 和 age 的对象：

interface Person {
  name: string;
  age: number;
}
const person: Person = {
  name: '张三',
  age: 30,
}; 

使用 Record 类型，我们可以简化这个对象的定义：

type Person = Record<'name' | 'age', string | number>;
const person: Person = {
  name: '张三',
  age: 30,
}; 

Record 类型的基本用法

Record 类型的基本用法是将一组属性名和它们的类型用 Record 关键字包裹起来，属性名可以是字符串字面量或符号，类型可以是任何类型，如果属性名是一个字符串字面量，那么它的值必须是字符串；如果属性名是一个符号，那么它的值必须是该符号对应的类型。

我们可以创建一个表示颜色的 Record 类型：

type Color = Record<'red' | 'green' | 'blue', string>;
const color: Color = {
  red: '#FF0000',
  green: '#008000',
  blue: '#0000FF',
}; 

在这个例子中，我们创建了一个名为 Color 的 Record 类型，它有三个属性：red、green 和 blue，它们的类型都是字符串，然后我们创建了一个 color 对象，它具有这三个属性，并分别赋值为红色、绿色和蓝色的十六进制颜色代码。

Record 类型的高级用法

可选属性

你可以使用问号（?）来表示一个可选的属性，这意味着该属性的值可以为 undefined。

type PersonOptional = Record<'name' | 'age' | 'gender'?, string | number | undefined>;
const personOptional: PersonOptional = {
  name: '张三',
  age: 30,
}; 

在这个例子中，我们创建了一个名为 PersonOptional 的 Record 类型，它有三个属性：name、age 和可选的 gender，然后我们创建了一个 personOptional 对象，它具有 name 和 age 属性，但没有 gender 属性，注意，这里的 gender 属性值为 undefined。

只读属性

你可以使用 readonly 关键字来表示一个只读的属性，这意味着该属性的值只能在对象初始化时设置，之后不能被修改。

type PersonReadonly = Record<'name' | 'age' | 'gender' | 'isStudent' | 'isEmployee' | 'isTeacher', string | number | boolean>;
const personReadonly: PersonReadonly = {
  name: '张三',
  age: 30,
  gender: '男',
  isStudent: true,
  isEmployee: false,
  isTeacher: false,
}; 

在这个例子中，我们创建了一个名为 PersonReadonly 的 Record 类型，它有七个属性：name、age、gender、isStudent、isEmployee、isTeacher，然后我们创建了一个 personReadonly 对象，它具有这些属性，并在初始化时设置了它们的值，由于没有使用 readonly 关键字，所以这些属性的值之后仍然可以被修改，如果你尝试修改这些属性的值，TypeScript 编译器会报错，要创建一个真正的只读对象，你需要使用 TypeScript 的 Readonly<T> 类型：

const personReadonly: Readonly<PersonReadonly> = { ...personReadonly, isStudent: false }; // Error! Property 'isStudent' is readonly. 

在这个例子中，我们使用了 Readonly<T> 类型来创建一个真正的只读对象，当我们尝试修改 isStudent 属性的值时，TypeScript 编译器会报错，提示该属性是只读的。