小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
背景
前一阵子看TS的时候看到了传说中的Utility Types,觉得还挺好玩的,然后发现掘金也有不少大佬有科普,但总觉得缺少点什么(都太严谨,我喜欢轻松欢快的风格),本着学习有输入有输出心里才踏实,我就尝试用最简单易懂的方式,跟各位萌新或者大佬一起巩固学习 因为Utility Types还挺多的, 所以打算每个type出一篇博客,这样也比较有动力产出学习总结 所以今天的主角是Partial
正文
官方例子
先来看下官方的例子,以及说明
Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.
interface Todo {
title: string;
description: string;
}
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}
const todo1 = {
title: "organize desk",
description: "clear clutter",
};
const todo2 = updateTodo(todo1, {
description: "throw out trash",
});
简单来说,定义了接口Todo,注意看,每个属性都是必选的,因为没看到?:,所以定义todo1的时候,title和description是必填的,然后我们有个业务是需要更新todo,众所周知,patch(更新)的时候,我们是不是可选其中一个属性更新,也可以选择每个字段都更新,但我们又不想更改原始的接口Todo,那怎么办!等灯等灯等灯,Partial隆重登场,他的作用就是让原本接口的每个字段都变成可选的,所以Partial<Todo>就是做这件事情的,接下来看源码怎么实现的吧
源码讲解
直接上源码
/**
* Make all properties in T optional
*/
type Partial<T> = {
[P in keyof T]?: T[P];
};
讲解时间,这边T就是泛型,这个在我之前的TS泛型基础知识 之 萌新总结有简单讲解过,这里就不赘述了,keyof就是取对应的key,拿官方的例子来说,就拿到了title和
description, 那P in又是什么,这就是遍历而已,然后关键的来了,XDM有没有看到?:,原来就是他在搞事情,让我们的属性都变成了可选,可选后那他们的类型又是什么呢,T[P]不就是取他们的类型嘛!对照官方的例子,就是两个string拿来吧你,分别定义title和description的类型,顺便让他们变成可选的!牛逼,我的表演结束了,今天源码就讲解到这!撒花