TypeScript-索引访问操作符

2023-10-10 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： TypeScript-索引访问操作符

前言

TypeScript的索引访问操作符（Index Access Operator）允许您通过变量名或字符串来访问对象的属性。这种灵活性使您可以在运行时动态确定要访问的属性名称，增强了代码的可扩展性和动态性。例如，您可以使用obj[key]来访问对象obj中名为key的属性，这在处理动态数据或配置时非常有用。这一特性让TypeScript在应对各种数据结构和动态场景时表现得更为强大。

通过 [] 索引类型访问操作符, 我们就能得到某个索引的类型

class Person {
    name: string;
    age: number;
}
type MyType = Person['name'];

验证方式为，按住键盘的 ctrl 键 + 鼠标左键然后放到 MyType 上方即可。

应用场景

博主假设有这么一个需求: 获取指定对象, 部分属性的值, 放到数组中返回：

首先在来演变过程也就是说先不给出最终完整的代码：

let obj = {
    name: 'yangbuyiya',
    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: 'yangbuyiya',
    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];