TypeScript-索引通路操作符

• 通過​

  ​[]​

  ​ 索引類型通路操作符, 我們就能得到某個索引的類型

class Person {
    name: string;
    age: number;
}

type MyType = Person['name'];      

驗證方式為，按住鍵盤的 ctrl 鍵 + 滑鼠左鍵然後放到 ​

​MyType​

​ 上方即可。

應用場景

部落客假設有這麼一個需求: 擷取指定對象, 部分屬性的值, 放到數組中傳回：

首先在來演變過程也就是說先不給出最終完整的代碼：

let obj = {
    name: 'BNTang',
    age: 18,
    gender: true
}

function getValues<T, K extends keyof T>(obj: T, keys: K[]) {
    let arr = [];
    keys.forEach(key => {
        arr.push(obj[key]);
    });
    return arr;
}

let res = getValues(obj, ['name', 'age']);
console.log(res);      

運作效果如下發現是可以進行實作的，但是還是有問題：

如上的函數我是沒有指定具體的傳回的資料類型的，如果要指定傳回的資料類型，那麼就可能是 string、number、boolean、那麼這個時候就可以利用 ​

​索引類型通路操作符​

​ 來進行解決該問題最終代碼如下：

let obj = {
    name: 'BNTang',
    age: 18,
    gender: true
}

function getValues<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
    let arr = [] as T[K][];
    keys.forEach(key => {
        arr.push(obj[key]);
    })
    return arr;
}

let res = getValues(obj, ['name', 'age']);
console.log(res);      

通過索引類型通路操作符解決該問題其實它内部就是自動轉換為了聯合，例如我現在傳回的既有 string、又有 number 那麼傳回值類型就自動轉換為了 ​

​(string | number)[]​

​​，驗證方式為，按住鍵盤的 ctrl 鍵 + 滑鼠左鍵然後放到 ​

​res​

​ 上方即可。

索引通路操作符注意點

• 不會傳回​

  ​null/undefined/never​

  ​ 類型

interface TestInterface {
    a: string,
    b: number,
    c: boolean,
    d: symbol,
    e: null,
    f: undefined,
    g: never
}

type MyType = TestInterface[keyof TestInterface];      

驗證方式為，按住鍵盤的 ctrl 鍵 + 滑鼠左鍵然後放到 ​

​MyType​

​ 上方即可。