如何强制 Typescript 对象的索引成员的类型
编程语言 TypeScript 基于 JavaScript，具有强类型、面向对象和编译性。该语言通过静态类型、类和接口等工具得到改进，有助于早期错误检测并使 JavaScript 更易于管理。TypeScript 的功能之一是能够强制执行对象索引成员的类型，此过程也称为索引签名。
索引签名是一组键值对，描述对象可能具有的许多属性。使用值和键分别指定属性名称的类型和属性值的类型。要强制执行对象属性的类型，用户可以利用 TypeScript 的索引签名功能。
索引签名可以有效地强制执行某些对象属性，但它们也会使代码难以理解和维护。因此，只在必要时使用索引签名是至关重要的。
语法
let objectName: {
[key: string]: string
}
在上述语法中，"objectName"是我们对象的名称，我们将键类型强制为字符串，将值强制为字符串。
示例 1
在此示例中，我们有两个接口，Person 和 PhoneBook。Person 接口定义了具有两个属性的 person 对象的结构:name(字符串)和 age(数字)。PhoneBook 接口定义了一个索引签名，该签名使用字符串类型作为键，使用 Person 接口作为值。这意味着任何实现 PhoneBook 接口的对象只能具有具有字符串类型键和 Person 类型值的属性。
然后我们定义一个变量 phoneBook 类型 PhoneBook 并分配一个空对象。然后，我们向电话簿添加一些条目，这些条目应以姓名为键，以 Person 对象为值。最后，我们在控制台中记录这些值，以验证我们是否尝试放置任何其他类型的变量而不是上述类型，否则编译器将给出错误。
// Person interface
interface Person {
name: string
age: number
}
// PhoneBook interface
interface PhoneBook {
[key: string]: Person
}
let phoneBook: PhoneBook = {}
phoneBook['Person 1'] = { name: 'ABC', age: 30 }
phoneBook['Person 2'] = { name: 'XYZ', age: 25 }
phoneBook['Person 3'] = { name: 'MNO', age: 10 }
console.log(phoneBook)
编译后，它将生成以下 JavaScript 代码 -
var phoneBook = {};
phoneBook['Person 1'] = { name: 'ABC', age: 30 };
phoneBook['Person 2'] = { name: 'XYZ', age: 25 };
phoneBook['Person 3'] = { name: 'MNO', age: 10 };
console.log(phoneBook);
输出
上述代码将产生以下输出 –
{ 'Person 1': { name: 'ABC', age: 30 },
'Person 2': { name: 'XYZ', age: 25 },
'Person 3': { name: 'MNO', age: 10 } }
示例 2
在此示例中，我们有一个接口 Product，它定义了具有两个属性的产品对象的结构:名称(字符串)和价格(数字)。然后，我们还有另一个接口 ShoppingCart，它表示使用数字类型作为键、使用 Product 接口作为值的索引签名。任何实现 ShoppingCart 接口的对象都只能具有键类型为数字、值类型为 Product 的属性。
然后，我们定义一个 ShoppingCart 类型的变量 cart，并为其分配一个空对象。然后，我们向购物车添加一些条目，这些条目应以产品 ID 作为键、以产品对象作为值。我们可以看到，这些条目已正确添加到购物车中，如果值不是 Product 类型，或者产品对象缺少 Product 接口中定义的任何属性，则会给出错误。
interface Product {
name: string
price: number
}
// ShoppingCart interface
interface ShoppingCart {
[key: number]: Product
}
let cart: ShoppingCart = {}
cart[1] = { name: 'Shirt', price: 20 }
cart[2] = { name: 'Pants', price: 30 }
cart[3] = { name: 'Shoes', price: 40 }
console.log(cart[1])
console.log(cart[2])
console.log(cart[3])
编译后，它将生成以下 JavaScript 代码 -
var cart = {};
cart[1] = { name: 'Shirt', price: 20 };
cart[2] = { name: 'Pants', price: 30 };
cart[3] = { name: 'Shoes', price: 40 };
console.log(cart[1]);
console.log(cart[2]);
console.log(cart[3]);
输出
上述代码将产生以下输出 –
{ name: 'Shirt', price: 20 }
{ name: 'Pants', price: 30 }
{ name: 'Shoes', price: 40 }
这些示例说明了如何使用索引签名来强制执行对象的属性类型。索引签名是一项强大的功能，可以帮助您编写更强大且更易于维护的代码，但重要的是要明智地使用它们，并且只在必要时使用它们。
