TypeScript Record详解|极客笔记

TypeScript Record详解

引言

在 TypeScript 中，record 是一个非常有用的数据类型，它可以用来表示一个以 key-value 组成的集合，类似于字典或映射。它在处理需要动态添加、删除、修改 key-value 对的情况下非常方便。

本文将详细介绍 TypeScript 中的 record 类型，包括其基本语法、常用操作和使用示例等内容。

什么是 record

record 是 TypeScript 中的一种高级类型，它允许将一个给定的类型的所有属性转换为一个新的对象类型，其中每个属性的键类型会被映射为新对象的键，而每个属性的值类型则会被映射为新对象的值。

换句话说，record 类型可以看作是将已有类型中的每个属性转换为键值对的形式。这使得我们可以通过一个对象的属性来访问其对应的值，类似于字典或映射。

基本语法

在 TypeScript 中，创建 record 类型的语法如下所示：

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

其中，K extends keyof any 表示 K 是所有类型的 key 的联合类型，而 T 则表示一个给定类型的值。

record 的常用操作

创建 record 对象

我们可以使用 record 创建一个新的对象，例如：

type Person = {
  name: string;
  age: number;
  gender: string;
};

const people: Record<string, Person> = {
  alice: { name: 'Alice', age: 20, gender: 'Female' },
  bob: { name: 'Bob', age: 25, gender: 'Male' },
  carol: { name: 'Carol', age: 30, gender: 'Female' },
};

在上面的示例中，我们使用 Record<string, Person> 创建了一个 record 对象 people，其中键的类型为字符串，值的类型为 Person 类型。

访问 record 对象的值

可以通过 record 的键来访问对应的值，例如：

console.log(people['alice']);  // 输出：{ name: 'Alice', age: 20, gender: 'Female' }
console.log(people['bob']);    // 输出：{ name: 'Bob', age: 25, gender: 'Male' }
console.log(people['carol']);  // 输出：{ name: 'Carol', age: 30, gender: 'Female' }

添加或修改 record 对象的值

可以使用赋值操作符来给 record 对象添加或修改键值对，例如：

people['dave'] = { name: 'Dave', age: 35, gender: 'Male' };
people['alice'] = { name: 'Alice', age: 21, gender: 'Female' };

console.log(people['dave']);   // 输出：{ name: 'Dave', age: 35, gender: 'Male' }
console.log(people['alice']);  // 输出：{ name: 'Alice', age: 21, gender: 'Female' }

在上面的示例中，我们通过赋值操作符给 people 对象添加了男性用户 Dave，并且修改了 Alice 的年龄。

删除 record 对象的值

可以使用 delete 关键字来删除 record 对象中的键值对，例如：

delete people['carol'];
console.log(people['carol']);  // 输出：undefined

在上面的示例中，我们使用 delete 关键字删除了 people 对象中的 carol 键的值。

检查 record 对象是否存在指定键

可以使用 in 关键字来检查 record 对象中是否存在指定的键，例如：

if ('bob' in people) {
  console.log('Bob exists!');
} else {
  console.log('Bob does not exist!');
}

在上面的示例中，我们使用 in 关键字检查 people 对象中是否存在 bob 键。

循环遍历 record 对象

可以使用 for...in 循环结构来遍历 record 对象的键值对，例如：

for (const key in people) {
  console.log(` ${key}:$ {people[key].name}`);
}

在上面的示例中，我们使用 for...in 循环遍历 people 对象的键，并输出每个键对应的 name 属性。

record 的使用示例

下面我们将通过一些示例来进一步理解 record 的使用方法。

用 record 统计字符出现次数

假设我们有一个字符串，我们需要统计其中每个字符出现的次数，我们可以使用 record 对象来实现：

function countCharacters(str: string): Record<string, number> {
  const result: Record<string, number> = {};

  for (const char of str) {
    result[char] = (result[char] || 0) + 1;
  }

  return result;
}

const str = 'hello world';
const charCount = countCharacters(str);

console.log(charCount);
// 输出：{ h: 1, e: 1, l: 3, o: 2, ' ': 1, w: 1, r: 1, d: 1 }

在上面的示例中，我们定义了一个 countCharacters 函数，它会将给定字符串中每个字符出现的次数统计到一个 record 对象 result 中。

使用 record 动态设置样式

假设我们有一个简单的应用程序，我们需要根据用户的选择动态设置不同元素的样式，我们可以使用 record 对象来表示不同样式的集合：

type Style = {
  color: string;
  fontSize: number;
};

type Styles = Record<string, Style>;

function applyStyle(elementId: string, styleName: keyof Styles) {
  const element = document.getElementById(elementId);

  if (!element) {
    return;
  }

  const styles: Styles = {
    header: { color: 'red', fontSize: 24 },
    content: { color: 'blue', fontSize: 16 },
    footer: { color: 'green', fontSize: 20 },
  };

  const style = styles[styleName];

  if (style) {
    element.style.color = style.color;
    element.style.fontSize = `${style.fontSize}px`;
  }
}

applyStyle('header', 'header');
applyStyle('content', 'content');
applyStyle('footer', 'footer');

在上面的示例中，我们定义了两个类型 Style 和 Styles，分别表示一个样式对象和多个样式对象的集合。然后，我们定义了一个 applyStyle 函数，它根据 styleName 设置指定元素的样式。