用最简单的话讲解Utility Types-Pick

367 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

背景

XDM,瞧我发现了什么,就如开头说的这样,小知识,大挑战!本文正在参与程序员必备小知识,我真的不是为了奖励,才在一天里更新两篇水文,纯粹是为了学习,学习使我快乐,你们记得要信我!咳咳!上次自己手写了Record,不知道各位看官满意否(虽然我知道也没什么人看),废话不多说,真的不是为了奖励,我们接下来看下传说中的Pick,字面意思就是选择挑选!看它怎么个挑法,进入我们的学习之旅

正文

官方例子

先来看下官方的例子,以及说明,看懂了才好实现嘛

Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
 
todo;

来来来,Todo的接口的确出名,官方好多例子都用了这个接口名,初始的Todo接口,有3个字段,分别是balabalabala,然后现在的需求就是,我不想要description了,但不想改变原本的接口,我只取里面的2个title和completed(别着急,之后有全新的Utility Type支持反选哦)该怎么处理,Pick就诞生了!这边XDM在注意个细节,因为是Pick挑选,那自然我们挑选的key是原本这个接口里有的key,这个也是我们实现时需要考虑的,现在开始表演实现Pick功能

开始实现

老样子,废话文学,我们看Pick需要传入两个泛型,所以架子自然而然就是这样的

type MyPick<T, K> = {

}

T代表我们传入的类型,K代表我们挑选的key有哪些嘛,接下去我们来实现,挑选的key必然是之前接口里有的key,所以keyofextends,给我上

type MyPick<T, K extends keyof T> = {

}

感觉已经完成一大半了,之后当然就是对挑选出来的key进行遍历,然后标注他们本来的类型

type MyPick<T, K extends keyof T> = {
    [P in K]: T[P]
}

实现好了看下源码和我们是否一样吧

源码讲解

直接上源码

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

简直完全一摸一样,我真是个小天才,实现的过程和步骤在上面的这个环节已经解说,这边就不再赘述了!希望XDM看的满意,多多支持,可以和小白的我一起探讨,如果有什么解说不太正确的,也希望各位大佬轻喷,并且指导!谢谢观看,今天的水文真结束了!

参考