一文讀懂TS索引簽名

索引:對象或數組的對應位置的名字

數組的索引就是 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