typeScript中的可索引类型

定义：描述那些能够“通过索引得到”的类型，比如a[10]或者a['10']

可索引类型具有一个 索引签名，它描述了对象 索引的类型 ，还有相应的 索引返回值类型

例子：

interface StringArray {

[index: number]: string;

}

这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。

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

例子：

class Animal {

name: string;

}

class Dog extends Animal {

breed: string;

}

Animal!interface NotOkay {

[x: number]: Animal;

[x: string]: Dog;

}

错误：相当于number->string->Animal ，string->Dog,但是Animal不是Dog的子类型

加入了索引签名，就会对索引类型和返回值类型进行检查

interface NumberDictionary {

[index: string]: number;

length: number; // 可以，length是number类型

name: string // 错误，`name`的类型与索引类型返回值的类型不匹配

}

你可以将索引签名设置为只读，这样就防止了给索引赋值：

interface ReadonlyStringArray {

readonly [index: number]: string;

}

let myArray: ReadonlyStringArray = ["Alice", "Bob"];

myArray[2] = "Mallory"; // error!

额外的属性检查检查时，可以用索引类型避免编译错误

interface SquareConfig {

color: string

}

function test(config: SquareConfig):void{

}

test({ color: "red", width: 100 });//报错

interface SquareConfig {

color: string；

[propName: string]: any;

}

function test(config: SquareConfig):void{

}

test({ color: "red", width: 100 });//编译通过

参考：https://www.tslang.cn/docs/handbook/interfaces.html