手动实现TypeScript 的pick

57 阅读1分钟

首先介绍下pick的用法

我有个基类

 interface Base  {
     num: number;
     name: string;
     age: number;
 }

现在我想要实现一个类型,但是里面只想有name和age,那此时pick就能发挥了

type A = Pick<Base, 'name' | 'age'>

const a: A = {
  name: 'ffff',
  age: 20
}

pick可以从一个类型中挑出一些属性出来直接给另外的类型使用

接下来让我们来自己实现pick功能

 type MyPick = {

}

首先有入参,从哪个类型pick以及pick哪些属性

 type MyPick<T, key> = {

}

这个key需要从传入的T这里拿到,我们使用keyof拿到,比如传入的T是之前的Base,则:

keyof  Base = 'num'| 'name' | 'age'

回到上面,那key的类型=keyof Base,我们使用继承实现

type MyPick<T, key extends keyof T> = {
 ...
}

接下来来填充MyPick的结构 它的属性AttrKey就是key的某一个, 属性的类型是T[AttrKey]

综上

type MyPick<T, key extends keyof T> = {
  [AttrKey in key]: T[AttrKey]
}

使用MyPick

type A = MyPick<Base, 'name' | 'age'> 

const a: A = { 
  name: 'ffff', 
  age: 20 
}

用到的知识点:

1、keyof

keyof 操作符接受一个对象类型作为参数,返回该对象属性名组成的字面量联合类型,其作用类似 JavaScript 中的 Object.keys

2、in

in  一般使用者是一个联合类型,使用 in 操作符可以对该联合类型进行迭代。其作用类似 JavaScript 中的 for...in