【每日一拳】打在深度学习 Typescript 之掌握+手写内置工具类上

前言

众所周知，TypeScript 官方提供了很多全局的内置工具类型，让我们不需要再重新造轮子并且可以直接使用，还可以通过这些全局工具类型来实现更为复杂的类型。

试想如果可以去试着理解和手写这些类型，也可以帮助我们打通任督二脉，更好的掌握和理解 TypeScript 中的各种类型，在项目中去自己造新轮子。

---

Partial

创建一个 Partial 类型，使传入的 Type 中所有属性都变成可选的。

type User = {
  name: string,
  age: number
};

type PartialType = Partial<User>;
// 相当于
type PartialType = {
  name?: string,
  age?: number
}

const user: PartialType = {
  age: 17
} 

原理实现：

通过 keyof 操作符获取已有对象类型的所有属性 key，给他们重新赋值类型，并将其设置为可选属性。

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

Required

创建一个 Required 类型，使传入的 Type 中所有属性都是必填项，是 Partial 类型的对立面。

type User = {
  name?: string,
  age?: number
};

type RequiredType = Required<User>;
// 相当于
type RequiredType = {
  name: string,
  age: number
}

const user: RequiredType = {
  age: 17
}
// 就会报错 Property 'name' is missing in type '{ age: number; }' but required in type 'Required<User>'. 

原理实现：

同样通过 keyof 操作符获取已有对象类型的所有属性 key，通过 TypeScript 提供的类型计算能力 - 修饰符给每个属性去掉 ? 修饰符，从可选状态转化为必填状态，并给他们重新赋值类型。

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

Readonly

创建一个 Readonly 类型，使传入的 Type 中所有属性都是只读的。

type User = {
  name: string,
  age: number
};

type ReadonlyType = Readonly<User>;

const user: ReadonlyType = {
	name: 'king',
  age: 17,
}

user.age = 18
// 就会报错 Cannot assign to 'age' because it is a read-only property. 

原理实现：

同样通过 keyof 操作符获取已有对象类型的所有属性 key，给他们重新赋值类型，并添加 readonly 关键字，就实现了只读操作。

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

Pick<Type, Keys>

创建一个 Pick 类型，从传入到 Type 类型中，选择出部分属性 key 构成新的类型

type User = {
  name: string,
  age: number,
  gender: string
};

type PickType = Pick<User, 'name' | 'ag