TypeScript 索引型別

索引型別查詢操作符 keyof 可以獲取運算元的可訪問索引字串字面量型別。

關於keyof可以參閱TypeScript keyof 用法一章節。

程式碼例項如下:

[typescript] 純文字檢視 複製程式碼
interface Antzone{
  webName:string;
  age:number;
  address:string;
}
let type:keyof Antzone;

返回值是已存在的公共屬性名構成的字串聯合型別，截圖如下:

這時候，字串索引就形成字串字面量型別，並且這些字面量型別組合成一個聯合型別。

關於字串字面量型別可以參閱TypeScript 字串字面量型別一章節。

使用索引型別，編譯器就可以檢查使用動態屬性名的程式碼。

程式碼例項如下：

[typescript] 純文字檢視 複製程式碼
function func(obj, names) {
  return names.map(name =>obj[name]);
}

上面程式碼可以返回物件屬性子集的屬性值陣列。

在TypeScript通過索引型別查詢和索引訪問操作符實現類似功能。

程式碼如下：

[typescript] 純文字檢視 複製程式碼
interface Antzone{
  webName:string;
  age:number;
  address:string;
}

function func<T, K extends keyof T>(obj: T, names: K[]): T[K][] {
  return names.map(name => obj[name]);
}

let antzone: Antzone = {
  webName: '螞蟻部落',
  age: 5,
  address:"青島市南區"
};
let strings = func(antzone, ['webName','age']);

使用keyof T可以動態獲取索引型別，也就是如果介面新增一個屬性，它會實時獲取。

於是可以很方便的檢查是否傳遞了正確的屬性名給函式。

程式碼例項如下：

[typescript] 純文字檢視 複製程式碼
let strings = func(antzone, ['webName','target']);

程式碼報錯，因為並沒有target屬性；實現此判定利用了泛型限定，具體參閱TypeScript 泛型限定一章節。

函式的返回值型別是T[K]型別陣列，關於T[K]索引訪問操作符參閱TypeScript keyof 用法一章節後半部分。

看如下程式碼例項，以加深對T[K]的理解:

[typescript] 純文字檢視 複製程式碼
interface Antzone{
  webName:string;
  age:number;
  address:string;
}

let antzone: Antzone = {
  webName: '螞蟻部落',
  age: 5,
  address:"青島市南區"
};
type tp=Antzone["webName"];
let webName=antzone["webName"];

上面程式碼中，T是介面Antzone，K是字串索引，如"webNmae"，返回值是對應屬性的資料型別，也就是antzone物件的webName屬性值的資料型別。