定义:描述那些能够“通过索引得到”的类型,比如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