TypeScript 中的间接索引与映射类型（Mapped Type）详解-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，间接索引和映射类型（Mapped Type）是两个非常重要的概念。它们可以帮助开发者更加高效地编写代码，提高代码质量和可维护性。本文将详细介绍 TypeScript 中的间接索引和映射类型，包括其概念、用法、示例代码以及学习和指导意义。

一、间接索引

在 TypeScript 中，间接索引是指使用一个变量或函数的返回值作为另一个变量或函数的索引。这种方式可以使代码更加灵活和可扩展，适用于各种场景。

1. 数组和对象的间接索引

在数组和对象中，可以使用间接索引来访问元素或属性。例如：

// www.javascriptcn.com code example
const arr = [1, 2, 3, 4, 5];
const index = 3;

console.log(arr[index]); // 输出 4

const obj = {
  name: '张三',
  age: 18,
  gender: '男'
};
const key = 'age';

console.log(obj[key]); // 输出 18

在这个例子中，index 和 key 变量分别作为数组和对象的索引来访问元素或属性。这种方式可以使代码更加灵活和可扩展，比如可以根据用户输入的值来动态获取数组或对象中的元素或属性。

2. 函数的间接索引

在函数中，可以使用间接索引来动态生成函数的参数或返回值。例如：

// www.javascriptcn.com code example
function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const obj = {
  name: '张三',
  age: 18,
  gender: '男'
};

console.log(getValue(obj, 'name')); // 输出 '张三'
console.log(getValue(obj, 'age')); // 输出 18
console.log(getValue(obj, 'gender')); // 输出 '男'

在这个例子中，getValue 函数接收一个对象和一个键名作为参数，使用间接索引来获取对象中对应的属性值。这种方式可以使函数更加灵活和通用，可以处理各种类型的对象和键名。

二、映射类型（Mapped Type）

在 TypeScript 中，映射类型（Mapped Type）是指一种可以从一个旧类型创建一个新类型的方式。它可以在不改变类型结构的情况下，根据旧类型的属性来生成新类型的属性。映射类型可以帮助开发者更加高效地编写代码，避免重复代码和手动维护类型定义。

1. Readonly 映射类型

在 TypeScript 中，可以使用 Readonly 映射类型来将一个对象的所有属性设置为只读。例如：

// www.javascriptcn.com code example
interface Person {
  name: string;
  age: number;
  gender: string;
}

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = {
  name: '张三',
  age: 18,
  gender: '男'
};

console.log(person.name); // 输出 '张三'
person.name = '李四'; // 报错：无法分配到 "name" ，因为它是只读属性。

在这个例子中，Readonly<Person> 表示将 Person 接口中所有属性设置为只读，生成一个新的只读接口 ReadonlyPerson。这种方式可以避免在代码中手动添加 readonly 修饰符，提高代码可维护性和可读性。

2. Partial 映射类型

在 TypeScript 中，可以使用 Partial 映射类型来将一个对象的所有属性设置为可选。例如：

// www.javascriptcn.com code example
interface Person {
  name: string;
  age: number;
  gender: string;
}

type PartialPerson = Partial<Person>;

const person: PartialPerson = {
  name: '张三'
};

console.log(person); // 输出 { name: '张三' }

在这个例子中，Partial<Person> 表示将 Person 接口中所有属性设置为可选，生成一个新的可选接口 PartialPerson。这种方式可以避免在代码中手动添加 ? 号来表示可选属性，提高代码可维护性和可读性。

3. Pick 映射类型

在 TypeScript 中，可以使用 Pick 映射类型来从一个对象中选取部分属性。例如：

// www.javascriptcn.com code example
interface Person {
  name: string;
  age: number;
  gender: string;
}

type PickPerson = Pick<Person, 'name' | 'age'>;

const person: PickPerson = {
  name: '张三',
  age: 18
};

console.log(person); // 输出 { name: '张三', age: 18 }

在这个例子中，Pick<Person, 'name' | 'age'> 表示从 Person 接口中选取 name 和 age 两个属性，生成一个新的接口 PickPerson。这种方式可以避免在代码中手动复制和粘贴属性，提高代码可维护性和可读性。

4. Record 映射类型

在 TypeScript 中，可以使用 Record 映射类型来从一个对象中生成另一个对象。例如：

// www.javascriptcn.com code example
type Weekday = 'Mon' | 'Tue' | 'Wed' | 'Thu' | 'Fri';
type Day = {
  [K in Weekday]: string;
};

const day: Day = {
  Mon: '星期一',
  Tue: '星期二',
  Wed: '星期三',
  Thu: '星期四',
  Fri: '星期五'
};

console.log(day); // 输出 { Mon: '星期一', Tue: '星期二', Wed: '星期三', Thu: '星期四', Fri: '星期五' }

在这个例子中，[K in Weekday]: string 表示根据 Weekday 类型中的枚举值生成一个新的对象类型 Day，对象中的属性名为枚举值，属性值为字符串类型。这种方式可以帮助开发者更加高效地编写代码，避免手动编写大量的对象类型定义。

三、学习和指导意义

间接索引和映射类型是 TypeScript 中非常重要的概念，它们可以帮助开发者更加高效地编写代码，提高代码质量和可维护性。掌握这些概念可以让开发者更加熟练地使用 TypeScript，写出更加健壮和可读的代码。

除了本文介绍的间接索引和映射类型之外，TypeScript 还有许多其他的高级特性和语法，例如泛型、装饰器、枚举、类和接口等。开发者可以通过学习这些特性和语法，提高自己的编程水平和技术能力，写出更加优秀和高效的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d18351a941bf713432f81a

TypeScript 中的间接索引与映射类型（Mapped Type）详解