实现
function Pick<T extends object, P extends keyof T>(
originObj: T,
...getAttr: P[]
): Pick<T, P> {
return getAttr.reduce((pre, cur) => {
pre[cur] = originObj[cur];
return pre;
}, Object.create(null));
}
let test=Pick({a:1,b:'a',c:true},'a','b');
console.log(test.a);
解析
要理解上面的类型需要知道keyof类型操作符,数组类型和Pick工具。
keyof类型操作符
对一个对象类型使用 keyof 操作符,会返回该对象属性名组成的一个字符串或者数字字面量的联合。这个例子中的类型 P 就等同于 "x" | "y":
type test={
a:number;
b:string;
c:boolean;
}
type test_1=keyof test; // 'a'|'b'|'c'
数组类型
一般string[]写法限制数组内部元素类型只能是string;如果是(string|number)[]则表示数组内部元素类型可以是string或者number。在上面的写法泛型P继承T的属性名联合类型,比如'a' exntends 'a'|'b'限定后面传入的字符串是第一个参数的属性名。
Pick工具
Pick作用是在第一个参数中提取某些属性组成新的类型,其实现为:
type Pick<T, K extends keyof T> = { [P in K]: T[P]; };
type test=Pick<{a:number;b:string;},'a'> //{a:number}
函数内部实现借助剩余参数组成的数组使用reduce方法进行循环创建一个新的对象同时返回。返回的参数也有相应的代码提示。