【Typescript】 Typescript 索引類型（11）

目錄

• 查詢操作符
• 索引訪問操作符
• 泛型類型

let obj = {
    a: 1,
    b: 2,
    c: 3
}

function getValues(obj: any, keys: string[]) {
    return keys.map(key => obj[key]);
}

console.log(getValues(obj, ['a', 'b']));
console.log(getValues(obj, ['e', 'f']));

上面的結果TS編寫並沒有給我們報錯。如何使用TS對這種類型進行約束，這里我們要用到TS的索引類型。要了解索引類型，必須要了解一些概念，查詢操作符， 索引訪問操作符。
我們首先介紹下查詢操作符。

查詢操作符

interface Obj {
    a: number,
    b: string
}

let key: keyof Obj;

索引訪問操作符

那么key的類型就是Obj的字面量的聯合類型。
下面我們來看看索引訪問操作符，語法就是 T[k], 這個就表示對象T的屬性K所代表的類型。

let value: Obj['a'];

這里表示obj屬性a所代表的類型

泛型類型

然后就是泛型類型，這個前面已經講過

T extends U

下面我們來看一個例子：
我們需要做一個約束，keys一定是obj的屬性，那么如何做這個約束呢。
我們先定義一個泛型變量T，用他來約束obj。然后用泛型變量K來約束keys數組。然后把K添加一個類型約束，讓它繼承obj所有屬性的聯合類型。
然后函數的返回值，首先是一個數組，數組的元素屬性就是屬性K對應的類型。

function getValues2<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
 return keys.map(key => obj[key]);
}

這里我們指定obj沒有的屬性，obj就會報錯，由此我們可以看到索引屬性可以實現對對象屬性的查詢與訪問，然后再結合泛型約束，就能夠建立對象，對象屬性，以及屬性值之間的關系。