TS Record 的使用和案例

30 min read

TS Record 是 TypeScript 中的一种特殊类型，它允许我们定义一个具有特定属性的对象类型。下面是 TS Record 的用法和示例：

语法：

Record<K, T>

定义一个类型，该类型有一组键值对，其中键的类型为 K，值的类型为 T。

举例：

  1. 定义记录类型 Record
type PersonalRecord = Record<string, number>;

const personRecord: PersonalRecord = {
  age: 25,
  height: 180,
  weight: 75,
};

在这个例子中，我们定义了一个 PersonalRecord 类型，它的键是一个字符串类型，值为 number 类型。我们声明了一个 personRecord 变量，并给它赋值一个对象，它包含了 PersonRecord 声明的所有属性。

  1. 使用 Record 操作字符型映射
const fruitCount: Record<string, number> = {
  apple: 2,
  banana: 3,
  orange: 5,
};

在这个例子中，我们使用 Record 类型来定义一个 fruitCount 变量，它是一个字符型映射。键是字符串类型，值是 number 类型。我们定义了一个对象，它包含了三个键值对，表示苹果、香蕉和橙子的数量。

  1. 使用 Record 操作键值对
type User = {
  id: number;
  name: string;
  email: string;
};

// 将 user 变量转换成以 id 为键的对象
const user: User[] = [
  { id: 1, name: "Alice", email: "[email protected]" },
  { id: 2, name: "Bob", email: "[email protected]" },
];

const userById: Record<number, User> = user.reduce(
  (acc, u) => ({ ...acc, [u.id]: u }),
  {}
);

在这个例子中，我们定义了一个 User 类型和一个 user 变量。我们使用 Record 类型来定义一个 userById 变量，它是一个键值对类型，键是 number 类型，值是 User 类型。我们使用 reduce 方法将 user 数组转换成一个对象，该对象以每个 User 对象的 id 作为键，以该 User 对象本身作为值。

Record 和 Interface 使用上的区别

TS Record 是一种新型的 TypeScript 类型，用于表示具有相同类型的实例对象。它以大括号包裹的键值对属性列表的方式来定义。例如，一个表示人员信息的 TS Record 类型可以定义为：

type Person = {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

而 Interface 更加通用，可以表示任何类型，包括对象、函数、类等等。它通过关键字 interface 来定义，以冒号分割类型和值得方式来定义。例如，一个表示人员信息的 Interface 类型可以定义为：

interface Person {
  name: string;
  age: number;
  gender: 'male' | 'female';
}

另外，使用 TS Record 可以轻松地定义一组属性相同但值不同的对象。而 Interface 可以包含方法和可选属性等，可以定义更为复杂的类型。

在使用上，TS Record 更适合用于定义一些简单的数据类型，例如配置项、传输对象等，而 Interface 更适合用于定义更复杂的类型，例如类的接口、函数接口等等。同时，在 TS 中也可以同时使用两种语法来定义类型，根据场景和需求选择合适的方式即可。