TypeScript 中的可索引类型

TypeScript 中的可索引类型（Indexable Types）允许我们定义对象或数组的键/值对类型。在实践中，可索引类型非常有用，特别是在处理动态数据的时候。本文将介绍 TypeScript 中的可索引类型，包括字符串索引、数字索引和可读/写变体。

字符串索引

我们在编写 TypeScript 代码时，可以使用字符串索引来表示一个对象的键值必须是字符串类型的。字符串索引是用一个字符串来表示另一个类型的索引器，通常用于表示一个对象的动态属性名称。例如：

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

const person: Person = {
  name: "张三",
  age: 20,
  gender: "男",
  address: {
    province: "浙江省",
    city: "杭州市",
  },
  hobbies: ["篮球", "游泳"],
};

在上面的例子中，我们定义了一个 Person 接口，该接口有两个属性 name 和 age，还有一个字符串类型的索引器，可以存储实例中动态的属性。我们创建了一个 person 对象并将它赋值为 Person 类型。在创建 person 对象时，我们添加了一些动态属性 gender、address 和 hobbies。由于 gender 属性是字符串类型的，因此它可以被添加到 Person 类型中。

数字索引

除了使用字符串作为索引器之外，我们还可以使用数字作为索引器。在这种情况下，对象的属性名称必须是数字。例如：

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["张三", "李四", "王五"];

在上面的例子中，我们定义了一个 StringArray 接口，并使用数字索引器定义了它。我们创建了一个 myArray 数组并将其赋值为 StringArray。由于 StringArray 允许使用数字索引器，因此我们可以使用数字来访问数组中的元素。

可读/写变体

在某些情况下，我们可能只希望允许对象属性的读取，而不希望允许修改它们。同样，我们也可以只允许对象属性的修改，而不允许属性的读取。幸运的是，TypeScript 允许我们对可索引类型进行读写变体的定义。例如：

interface ReadonlyStringArray {
  readonly [index: number]: string;
}

const myArray: ReadonlyStringArray = ["张三", "李四", "王五"];

myArray[0] = "马六"; // Error: Index signature in type 'ReadonlyStringArray' only permits reading

在这个例子中，我们定义了一个 ReadonlyStringArray 接口，使用 readonly 关键字来防止修改属性。我们创建了一个 myArray 数组并将其赋值为 ReadonlyStringArray。在试图更改 myArray 数组中的第一个元素时，我们会收到一个错误消息。

总结

在 TypeScript 中，可索引类型允许我们定义对象或数组的键/值对类型。我们可以使用字符串或数字作为索引器，并可以定义可读/写的变体。在处理动态数据时，可索引类型非常有用，可以帮助我们更好地对数据进行建模并避免潜在的编程错误。