彻底搞懂typescript工具类型及其原理

前言

相信很多人都在学习typescript，这里介绍泛型常见的工具类型函数(Utility Types)及其在typescript中的源码实现。

工具函数

可能有些刚开始学ts的还不清楚什么工具类型指的是什么，工具类型就是TypeScript提供的一些实用类型来实现常见的类型转换，这些类型是全局可用的，所有的类型定义在typescript源码中也都能找到。

Partial

Partial<T>，将传入T类型的所有属性设为可选属性。

例如下面的实例代码，定义一个user接口类型，通过Partial，生成一个所有属性为可选的新的user类型。一个常见的使用场景就是合并或更新对象属性的方法，还有组件写props时也非常好用。

interface User {
   
    name: string;
    age: num;
}

type UpdateUser = Partial<User>
// {name?: string; age?: number}

原理：首先通过keyof T，遍历出类型T的所有属性，然后通过in操作符进行遍历，最后在属性后加上?，将属性变为可选属性。

// https://github.com/microsoft/TypeScript/blob/HEAD/src/lib/es5.d.ts#L1517
type Partial<T> = {
   
    [P in keyof T]?: T[P];
}

Required

Required，可以将传入参数的所有属性设为必选属性。
与Partial相反的一个方法，通过Required函数声明的类型属性会全部变为必选，看示例代码。

interface Props {
   
    a?: number;
    b?: string;
}
const obj: Props = {
    a: 5 };
const obj2: Required<Props> = {
    a: 5 }; // Property 'b' is missing in type '{ a: number; }'

原理：用于将 T 类型的所有属性设置为必选状态，首先通过 keyof T，取出类型 T 的所有属性， 然后通过 in 操作符进行遍历，最后在属性后的 ? 前加上 -，将属性变为必选属性。

这里顺便讲下-这个符号的作用，这是TypeScript 2.8为映射类型增加了添加或删除特定修饰符的能力。具体来说，readonly和?映射类型中的属性修饰符现在可以加上+或-前缀，以指示应该添加或删除该修饰符，当然一般+号是可以省略的。详情有2.8版本的官方文档里有提到(点击此链接跳转到官网。

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

Readonly

Readonly<T>将T的所有属性映射为只读的，相当于在所有属性上加了readonly。加上readonly的属性即为只读属性，不可修改。

interface IPerson {
   
  name: string
  age: number
}

type IReadOnlyPerson = Readonly<IPerson>
/**{
  readonly name: string; 
  readonly age: number;
}*/

原理: 遍历T的所有属性并加上readonly

    type Readonly<T> = {
    readonly [P in keyof T]: T[