那些你可能不知道的TypeScript索引类型和映射类型用法

2023-12-07 14:18:08

索引类型和映射类型是TypeScript中相对复杂的内容，但它们可以极大地提高代码的灵活性和可读性。如果您想成为一名合格的TypeScript开发人员，那么掌握这些类型是必不可少的。

索引类型

索引类型允许您在类型中指定键的类型及其对应的值的类型。这对于处理具有动态属性的对象非常有用。

例如，您可以使用索引类型来指定一个对象，该对象可以具有任意数量的字符串键，并且每个键的值都是一个数字：

interface Person {
  [key: string]: number;
}

现在，您可以使用这个接口来创建具有任意数量字符串键的对象，并且每个键的值都是一个数字。例如：

const person: Person = {
  name: 10,
  age: 20,
  city: 30,
};

索引类型不仅可以用于对象，还可以用于数组。您可以使用索引类型来指定数组中元素的类型。

例如，您可以使用索引类型来指定一个数组，该数组可以包含任意数量的数字：

type NumberArray = Array<number>;

现在，您可以使用这个类型来创建一个包含任意数量数字的数组。例如：

const numbers: NumberArray = [1, 2, 3, 4, 5];

映射类型

映射类型允许您将一种类型映射到另一种类型。这对于转换数据类型非常有用。

例如，您可以使用映射类型将一个字符串数组映射到一个数字数组：

type StringToNumberMap = {
  [key: string]: number;
};

现在，您可以使用这个类型来创建一个将字符串数组映射到数字数组的对象。例如：

const stringToNumberMap: StringToNumberMap = {
  "one": 1,
  "two": 2,
  "three": 3,
};

映射类型还可以用于将一种对象类型映射到另一种对象类型。例如，您可以使用映射类型将一个具有字符串键和数字值的接口映射到一个具有字符串键和字符串值的接口：

type PersonInterface = {
  name: string;
  age: number;
};

type PersonInterfaceWithStringValue = {
  [key in keyof PersonInterface]: string;
};

现在，您可以使用这个类型来创建一个具有字符串键和字符串值的接口。例如：

const personWithStringValue: PersonInterfaceWithStringValue = {
  name: "John",
  age: "20",
};

索引类型和映射类型的结合使用

索引类型和映射类型可以结合使用来解决实际问题。例如，您可以使用索引类型和映射类型来创建一个函数，该函数可以将一个对象中的所有数字值都乘以一个因子。

function multiplyValues(object: { [key: string]: number }, factor: number): { [key: string]: number } {
  const result: { [key: string]: number } = {};
  for (const key in object) {
    result[key] = object[key] * factor;
  }
  return result;
}

现在，您可以使用这个函数来将一个对象中的所有数字值都乘以一个因子。例如：

const object = {
  name: "John",
  age: 20,
  city: "New York",
};

const result = multiplyValues(object, 2);

console.log(result); // { name: "John", age: 40, city: "New York" }