索引:物件或陣列的對應位置的名字

陣列的索引就是 number 型別的 0,1,2,3...
物件的索引就是 string 型別的屬性名

數字索引簽名:通過定義介面用來約束陣列

type numberIndex{
    [index:number]:string
}
const testArray:numberIndex = ["1","2",3]// 不能將型別“number”分配給型別“string”。ts(2322) 所需型別來自此索引簽名

可以看到 testArray 陣列的第三位不符合 numberIndex 的約束.

字串索引簽名:用於約束物件

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;
}

上述例子說明了,一旦定義了索引簽名,那麼確定屬性和可選屬性的型別都必須是它的型別的子集

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
}

可以同時使用兩種型別的索引，但是數字索引的返回值必須是字串索引返回值型別的子型別。 這是因為當使用 number 來索引時，JavaScript 會將它轉換成 string 然後再去索引物件。

參考連結: https://juejin.cn/post/7003171767560716302#heading-21