玩转TypeScript工具类型（上）

联系我们：有道技术团队助手：ydtech01 / 邮箱：ydtech@rd.netease.com

随着前端项目的规模不断变大，多人协同开发已经成为了前端开发的标配，随之而来的就是 TypeScript 被越来越多的项目所使用，这种变化并不是对技术的盲目追求，而是业务驱动下的技术进步，TypeScript 通过对原生 JavaScript 提供强类型加持，在很大程度上提升了代码质量，大大降低了多人协同场景下不同模块接口相互调用可能出现的隐性 bug。本系列分享来源于我日常开发中对 TypeScript 工具类型的一些学习和使用体会，本系列文章分为上中下三篇，通过本系列分享，希望可以达到如下几个目的：

• 从源码的角度理解每一种工具类型的实现机制
• 通过一两个简单的例子了解每一种工具类型的基本用法
• 与此同时加深对 TypeScript 的理解
• 最终实现可以在实际工作中举一反三

一、 Partial：可选

1.1 源码解读

Partial类型的源码如下所示：

type Partial<T> = {
   
    [P in keyof T]?: T[P];
};

这里需要关注四个点：

• <T>：这是目标类型，也就是我们要做处理的类型，类型不确定，所以用泛型 T 表示
• [P in keyof T] ：keyof T返回 T 类型的所有键组成的一个类型，in 可以按照js中的for…in遍历去理解，后续对keyof有更详细的说明
• ?：可选，把返回类型的所有属性都转为可选类型
• 返回的是一个新类型，这个新类型来源于 T，并且和 T 在属性上有一种继承关系，在第2小节对Required<Type>的说明中会验证这一点

基于对源码的理解，就可以很好的理解Partial<Type>类型的作用就是返回一个新类型，这个新类型和目标类型 T 拥有相同的属性，但所有属性都是可选的。

1.2 实战用法

场景说明：在实际的业务开发中，经常会遇到需要对一个数据对象做整体或者局部更新的需求，这里就可以用到Partial<Type>

interface DataModel {
   
  name: string
  age: number
  address: string
}

let store: DataModel = {
   
  name: '',
  age: 0,
  address: ''
}

function updateStore (
  store: DataModel,
  payload: Partial<DataModel>
):DataModel {
   
  return {
   
    ...store,
    ...payload
  }
}

store = updateStore(store, {
   
  name: 'lpp',
  age: 18
})

亲手试一试

1.3 补充

这里增加一个对 keyof 的说明，通过一段代码来理解一下：

interface Person {
   
  name: string;
  age