TypeScript record使用详解

引言

TypeScript是一种静态类型的JavaScript超集，它为JavaScript添加了静态类型检查、类、接口、泛型等特性，提供了更好的编码支持和代码维护性。在TypeScript中，我们经常会使用Record类型来创建对象字面量或映射类型。本文将详细介绍Record类型的使用方法和示例代码。

概述

在TypeScript中，Record类型是一种映射类型，它用于将一个类型中的所有属性值映射到另一个类型中去。它的定义如下：

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

其中，K是一个联合类型，表示要映射的属性名的集合，T表示属性值的类型。Record类型可以将K中的每个属性名映射到类型T上，创建一个新的对象。下面是Record类型的一些常见用法和示例代码。

创建对象字面量

使用Record类型可以方便地创建一个对象字面量，其中属性名和属性值类型都是事先定义好的。例如，我们要创建一个表示用户信息的对象，包含姓名、年龄和性别三个属性。代码如下：

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

const user: UserInfo = {
  name: 'Alice',
  age: 25,
  gender: 'female'
};

通过使用Record类型，我们可以更简洁地定义对象字面量，如下：

type UserInfo = Record<'name' | 'age' | 'gender', string | number | 'male' | 'female'>;

const user: UserInfo = {
  name: 'Alice',
  age: 25,
  gender: 'female'
};

创建映射类型

除了创建对象字面量，Record类型还可以用于创建映射类型，将一个类型的属性映射到另一个类型上。例如，我们有一个表示学生成绩的对象，包含科目和对应的分数。现在我们要将科目修改为大写形式，并将每个科目的分数乘以2。代码如下：

type Grades = {
  math: number;
  english: number;
  science: number;
};

type UpperCaseGrades = {
  MATH: number;
  ENGLISH: number;
  SCIENCE: number;
};

type DoubleGrades = {
  math: number;
  english: number;
  science: number;
};

const grades: Grades = {
  math: 90,
  english: 85,
  science: 95
};

const upperCaseGrades: UpperCaseGrades = {
  MATH: grades.math,
  ENGLISH: grades.english,
  SCIENCE: grades.science
};

const doubleGrades: DoubleGrades = {
  math: grades.math * 2,
  english: grades.english * 2,
  science: grades.science * 2
};

通过使用Record类型，我们可以更简洁地定义映射类型，如下：

type Grades = Record<'math' | 'english' | 'science', number>;

type UpperCaseGrades = Record<UpperCase<'math' | 'english' | 'science'>, number>;

type DoubleGrades = Record<'math' | 'english' | 'science', number>;

const grades: Grades = {
  math: 90,
  english: 85,
  science: 95
};

const upperCaseGrades: UpperCaseGrades = {
  MATH: grades.math,
  ENGLISH: grades.english,
  SCIENCE: grades.science
};

const doubleGrades: DoubleGrades = {
  math: grades.math * 2,
  english: grades.english * 2,
  science: grades.science * 2
};

推导类型

在TypeScript中，我们可以使用Record类型推导出一个类型，不需要手动定义类型注解。例如，我们有一个表示城市和对应人口数量的对象，现在我们要推导出一个表示城市和对应人口密度的对象。代码如下：

const populations = {
  Shanghai: 24256800,
  Beijing: 21516000,
  Guangzhou: 15067800
};

const densities: Record<keyof typeof populations, number> = {
  Shanghai: populations.Shanghai / 6340,
  Beijing: populations.Beijing / 16410,
  Guangzhou: populations.Guangzhou / 7434
};

通过使用Record类型，我们可以推导出densities的类型，并进行人口密度的计算。

遍历属性

使用Record类型，我们可以方便地遍历一个对象的属性。例如，我们有一个表示某个学生的成绩单对象，现在我们要遍历成绩单，计算出总分和平均分。代码如下：

type Grading = Record<string, number>;

const grading: Grading = {
  math: 90,
  english: 85,
  science: 95
};

let total = 0;
for (const subject in grading) {
  total += grading[subject];
}

const average = total / Object.keys(grading).length;
console.log('Total:', total); // 输出：Total: 270
console.log('Average:', average); // 输出：Average: 90

通过使用Record类型，我们可以方便地遍历属性，并进行需要的操作。

字符串模板

在TypeScript中，我们可以使用Record类型来定义字符串模板。例如，我们有一个字符串模板，表示欢迎消息，其中包含两个占位符${name}和${age}，我们要将占位符替换为实际的值，并输出最终的欢迎消息。代码如下：

type PlaceholderMap = Record<string, string>;

const placeholderMap: PlaceholderMap = {
  name: 'Alice',
  age: '25'
};

const template = 'Welcome,  ${name}! You are$ {age} years old.';
const message = template.replace(/\${(\w+)}/g, (_, key) => placeholderMap[key]);
console.log(message); // 输出：Welcome, Alice! You are 25 years old.

通过使用Record类型，我们可以将字符串模板和变量的映射关系定义在一个对象中，方便替换占位符。