Appearance
索引类型
在开发中经常会遇到这样的场景：从对象中获取一些属性的值，然后建立一个集合
getValue 函数
抽取 obj 对象的一些值，形成一个数组
typescript
let obj = {
a: 1,
b: 2,
c: 3,
};
function getValue(obj: any, keys: string[]) {
return keys.map((key) => obj[key]);
}
// 打印出 [1,3]
console.log(getValue(obj, ["a", "c"]));
// ts 不会报错 并且打印出 [undefined,undefined]
console.log(getValue(obj, ["e", "f"]));
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
查询操作符
keyof T 表示类型 T 的所有公共属性的字面量联合类型
typescript
interface Obj {
a: number;
b: string;
}
// 类型推断为 let key: "a" | "b"
let key: keyof Obj;
1
2
3
4
5
6
2
3
4
5
6
索引访问操作符
T[K] 表示对象 T 的属性 K 所代表的类型
typescript
// 类型推断为 let value: number
let value: Obj["a"];
1
2
2
泛型约束
T extends U 表示泛型变量可以通过继承某些类型，以获得某些属性
getValue 函数改造
需求：参数 keys 里面的元素一定是参数 obj 里面的属性 定义一个泛型变量 T，用来约束 obj, 定义一个泛型变量 K，用来约束 keys 数组，给 keys 的元素 key 添加一个类型约束，即让 K 继承所有 obj 所有属性的联合类型，函数的返回值，首先是一个数组，数组元素的类型是 K 对应类型
typescript
let obj = {
a: 1,
b: 2,
c: 3,
};
function getValue<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
return keys.map((key) => obj[key]);
}
console.log(getValue(obj, ["a", "c"]));
/*
不能将类型“"e"”分配给类型“"a" | "c" | "b"”。
*/
console.log(getValue(obj, ["e", "f"]));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
总结
索引类型可以实现 对象属性的查询和访问， 然后再配合泛型约束，就能使我们建立对象，对象属性，以及属性值之间的约束关系