TypeScript中的索引签名：解锁动态对象属性的奥秘

2023-10-12 05:18:41

索引签名是TypeScript中一项非凡的功能，使我们能够在对象和类中使用动态属性名称。传统的做法是定义对象或类中的固定属性，然而索引签名允许我们在运行时确定属性名称，带来无与伦比的灵活性。

在TypeScript中，索引签名具有以下语法：

[key: string]: any;

其中，key是属性名称，any是该属性可以接受的类型。

例如，我们有一个对象，其中属性名称是产品的名称，而属性值是产品的价格。使用索引签名，我们可以定义如下对象：

const products: { [name: string]: number } = {
  'iPhone 14 Pro': 999,
  'Samsung Galaxy S23 Ultra': 1199,
  'Google Pixel 7 Pro': 899,
};

此对象允许我们在运行时通过其名称访问产品价格。我们可以使用点语法或方括号语法来访问属性：

console.log(products['iPhone 14 Pro']); // 输出：999
console.log(products.['Samsung Galaxy S23 Ultra']); // 输出：1199

索引签名不仅仅局限于字符串键。我们还可以使用数字键，甚至可以定义多个索引签名来处理不同类型的键：

interface Person {
  [name: string]: string;
  [age: number]: number;
}

const person: Person = {
  'firstName': 'John',
  'lastName': 'Doe',
  25: 1997, // 出生年份
};

console.log(person['firstName']); // 输出：John
console.log(person[25]); // 输出：1997