TypeScript 可索引类型详细介绍

1、TypeScript 可索引类型

TypeScript中的可索引类型类似于其他编程语言中的字典（key-value形式），例如 user[10]或user["Tom"]，应该从字典的角度去学习，这样更合理。与使用接口描述函数差不多，我们也可以用接口来定义可索引类型。

2、索引签名

可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。下面让我们看一个例子：

interface StringArray {
  [index: number]: string;   //索引签名
}

let userArray: StringArray;
userArray = ["Bob", "Fred"];

let user: string = userArray[0];

上面例子里，我们定义了StringArray接口，它具有一个索引签名[index: number]: string。这个索引签名表示了当用number去索引StringArray时会得到string类型的返回值。

2、索引说明

对于字典数据类型（key-value类型）来说，索引就是key。TypeScript支持两种类型的索引：字符串和数字。

**注意：**可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用 number 来索引时，JavaScript会将它转换成 string 然后再去索引对象。也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

class Animal {
    name: string;
}
class Dog extends Animal {
    run: string;
}

// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal;
    [x: string]: Dog;
}
//编译OK
interface Okay {
    [x: number]: Dog;     //Dog是Animal子类
    [x: string]: Animal;
}

3、只读索引签名

我们可以将索引签名设置为只读，这样就防止了给索引对象赋值，如下所示：

interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let userArray: ReadonlyStringArray = ["Alice", "Bob"];
userArray[2] = "Mallory"; // error!

此时，我们不能设置 userArray[2]，因为索引签名是只读的。

参考

《TypeScript 可索引类型》