TypeScript 可索引型別介面

可以通過介面描述能夠“通過索引獲取值”的型別，例如陣列或者物件:

[typescript] 純文字檢視 複製程式碼
let arr=[1,2,3,4];
let obj={
  webName:"螞蟻部落",
  age:4
}
arr[1];
obj["age"]

下面看一段程式碼例項，使用介面規定一個可索引型別：

[typescript] 純文字檢視 複製程式碼
interface IArray {
  [index: number]: string;
}

let arr: IArray= ["螞蟻部落", "青島市南區"];
let ant: string = arr[0];

上面規定索引簽名是number型別，返回值是字串型別。

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

[typescript] 純文字檢視 複製程式碼
class Animal {
  name: string;
}
class Dog extends Animal {
  breed: string;
}

interface NotOkay {
  [x: number]: Animal;
  [x: string]: Dog;
}

上面程式碼會報錯，因為數字型別索引的返回值不是字串型別索引返回值的子型別。

再來看一段程式碼例項:

[typescript] 純文字檢視 複製程式碼
interface Itest {
  [index: string]: number;
  length: number;
  name: string 
}

可以將索引簽名設定為只讀，這樣可以防止給索引賦值：

[typescript] 純文字檢視 複製程式碼
interface Itest {
  readonly [index: number]: string;
}
let arr: Itest = ["螞蟻部落", "青島市南區"];
arr[1] = "ts教程";

上面程式碼由於再次給索引為1的陣列賦值，所以報錯。