typescript实现Pick函数

391 阅读1分钟

实现

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);

195278D6B4AF11E20937E240A4F6F390.jpg

解析

要理解上面的类型需要知道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方法进行循环创建一个新的对象同时返回。返回的参数也有相应的代码提示。