索引:對象或數組的對應位置的名字 數組的索引就是 number 類型的 0,1,2,3... 對象的索引就是 string 類型的屬性名 數字索引簽名:通過定義介面用來約束數組 type numberIndex{ [index:number]:string } const testArray:num ...
索引:對象或數組的對應位置的名字
數組的索引就是 number 類型的 0,1,2,3...
對象的索引就是 string 類型的屬性名
數字索引簽名:通過定義介面用來約束數組
type numberIndex{
[index:number]:string
}
const testArray:numberIndex = ["1","2",3]// 不能將類型“number”分配給類型“string”。ts(2322) 所需類型來自此索引簽名
可以看到 testArray 數組的第三位不符合 numberIndex 的約束.
TIP
索引簽名的名稱如[index:number]:string里的index除了可讀性外,並無任何意義.但有利於下一個開發者理解你的代碼.
字元串索引簽名:用於約束對象
type objectType{
[propName:string]:number
}
const testObj:objectType = {
"name":100,
"age":"200" // 不能將類型“string”分配給類型“number”。ts(2322) 所需類型來自此索引簽名。
}
可以看到 testObj 的第二個對象不符合 objectType 的約束.
註意事項
可以看到上述的例子我都沒有在類型別名中添加其他的約束條件,僅寫了一個索引簽名約束
type attentionType{
name: string; // Ok
age?: number; // 類型“number | undefined”的屬性“age”不能賦給“string”索引類型“string”。ts(2411)
sex?: undefined; // OK
[propName: string]: string | undefined;
}
上述例子說明瞭,一旦定義了索引簽名,那麼確定屬性和可選屬性的類型都必須是它的類型的子集
可以同時使用兩種類型的索引，但是數字索引的返回值必須是字元串索引返回值類型的子類型。 這是因為當使用 number 來索引時，JavaScript 會將它轉換成 string 然後再去索引對象。
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
interface NotOkay {
[x: string]: Dog;
[x: number]: Animal; // Error
}
interface Okay {
[x: string]: Animal;
[x: number]: Dog; // OK
}
參考鏈接: https://juejin.cn/post/7003171767560716302#heading-21
