【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就会报错，由此我们可以看到索引属性可以实现对对象属性的查询与访问，然后再结合泛型约束，就能够建立对象，对象属性，以及属性值之间的关系。