TypeScript 中的映射类型和索引类型：深入理解它们的妙用

2023-01-26 18:52:25

TypeScript 中的映射类型和索引类型：揭开它们的神秘面纱

在 TypeScript 的世界里，映射类型和索引类型犹如两把锋利的双刃剑，帮助开发者塑造出灵活且可重用的代码。让我们一起揭开它们的秘密，探索它们令人着迷的力量！

映射类型：类型转换的魔力

想象一下，你手中有一组字符串，而你迫切需要将其转换成数字。别担心，映射类型就是你的魔法棒！它能将一种类型的键值对轻松转换为另一种类型的键值对，就像这样：

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

const stringArray = ['1', '2', '3'];
const numberArray: StringToNumber = stringArray.map(Number);

瞧！一瞬间，你的字符串数组就变成了一个数字数组，轻松自如！

扩展对象类型的超级大招

映射类型不仅能转换类型，还能扩展对象类型。比如，你想要给一个对象添加一个新的属性，但又不想大费周章地重新定义整个对象？没问题！映射类型也能搞定：

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

type UserWithAddress = User & {
  address: string;
};

const user: User = {
  name: 'John Doe',
  age: 30
};

const userWithAddress: UserWithAddress = {
  ...user,
  address: '123 Main Street'
};

现在，你的 user 对象就拥有了新的 address 属性，无缝且优雅！

索引类型：类型查找的指路明灯

索引类型是 TypeScript 中另一位重量级选手。它允许你使用一个键来访问类型中的特定属性。比如，你想获取对象中某个属性的值？索引类型就是你的向导：

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

const propertyName = 'age';
const propertyValue = User[propertyName]; // number

轻而易举地获取了对象的 age 值！

遍历类型的利器

索引类型不仅能查找属性，还能遍历整个类型，就像一个无所不知的探索者：

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

for (const propertyName in User) {
  const propertyValue = User[propertyName];
  console.log(propertyName, propertyValue);
}

如此一来，你就能逐个打印出对象的每个属性名和属性值，为深入了解类型提供了极大的便利！