如何强制TypeScript 对象的索引成员类型

编程语言 TypeScript 是基于 JavaScript 的，它是强类型、面向对象和编译的。该语言通过静态类型检查、类和接口等工具增强了 JavaScript，帮助提前检测错误并使 JavaScript 更易于管理。TypeScript 的一个特性是可以强制对象的索引成员类型，这个过程也被称为索引签名。

索引签名是描述对象可能具有的多个属性的一组键值对。分别使用值和键来指定属性名称的类型和属性值的类型。为了强制对象的属性类型，用户可以使用 TypeScript 的索引签名特性。

索引签名可以有效强制某些对象属性，但也可能使代码更难理解和维护。因此，仅在必要时才使用索引签名是很重要的。

语法

let objectName: {
   [key: string]: string
}

在上述语法中，’objectName’是我们对象的名称，我们将键的类型设置为字符串，值的类型也设置为字符串。

示例1

在这个示例中，我们有两个接口，Person和PhoneBook。Person接口定义了一个人对象的结构，有两个属性：name（字符串）和age（数字）。PhoneBook接口定义了一个索引签名，使用字符串类型作为键，Person接口作为值。这意味着实现PhoneBook接口的任何对象只能拥有键类型为字符串、值类型为Person的属性。

然后我们定义一个名为phoneBook的变量，类型为PhoneBook，并赋予一个空对象。然后我们向电话簿添加一些条目，其中键应该是姓名，值应该是Person对象。最后，我们使用console log打印这些值，以验证是否尝试将其他类型的变量放入而不是所提到的类型，此时编译器将会报错。

// 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，并将其赋值为空对象。然后，我们向cart添加一些条目，其中键应为产品id，值应为产品对象。我们可以看到条目被正确添加到cart中，如果值不是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 }

这些示例说明了如何使用索引签名来强制对象属性的类型。索引签名是一项强大的功能，可以帮助您编写更健壮和可维护的代码，但是需要明智地使用，并且只在必要时使用。