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​

​ 上方即可。