TypeScript 中的工具类型

Shavahn is a dickhead.png

我们知道在 TypeScript 中一切皆是类型，而 TypeScript 除了能够创建新类型之外，它还提供了一些工具类型实现转换现有类型的能力，这些工具类型是 TypeScript 内置的，同时它们全局可用。

Partial

Partial 会创建一个新的类型同时它内部所有属性都变成可选的。

type Type = { x: string, y: string };

// { x?: string; y?: string }
type PartialType = Partial;

Partial 最常使用的地方是让一个对象的所有属性都变的可选，比如下面这个例子，我们去更新用户的某些信息：

interface User {
  name: string;
  surname: string;
  age: number;
}

const updateUser = (user: User, fields: Partial): User => ({
  ...user,
  ...fields,
});

const user1: User = {
  name: "John",
  surname: "Doe",
  age: 17,
};

const user2 = updateUser(user1, { age: 18 });

// { name: "John", surname: "Doe", age: 18 }
console.log(user2);

我们看到 Partial 工具类型非常的好用，简单方便，我们很有必要研究下它的源码，这样当官方提供的工具类型不满足我们的需求的时候，我们还可以定制化，虽然很少遇到。

Partial 工具类型源码：

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

我们看到，Partial 本质是一个——泛型类型别名，里面还用到了索引类型和映射类型。

如果你很熟悉 TS 语法，完整的 Partial 写法应该是这样的：

type Partial = {
    [P in keyof T]+?: T[P]; // 多个加号
};

Required

Required 是 Partial 的反面，Required 创造一个新类型，同时内部所有的属性都是必须的。

type Type = { x?: string, y?: string };

// { x: string; y: string }
type RequiredType = Required;

使用事例例如：

interface User {
  name?: string;
  surname?: string;
  age?: number;
}

class UserManager {
  private user: Required;

  constructor(user: User) {
    this.user = {
      name: user.name || "Not Set",
      surname: user.surname || "Not Set",
      age: user.age || 0,
    };
  }

  getUser() {
    return this.user;
  }
}

Partial 工具类型的完整源码我们已经知道了，现在 Required 的源码相信你自己也能实现，很简单，我们只需要改下类型别名同时把加号换成减号就行了：

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

Readonly

Readonly 创建一个新类型，同时所有属性都变为只读属性，这也就意味着这些属性不能被重新赋值。

type Type = { x: string, y: string };

// { readonly x: string; readonly y: string }
type ReadonlyType = Readonly;

当我们使用 Object.freeze 的时候，Readonly 是非常的好用的：

interface User {
  name: string;
  surname: string;
  age: number;
}

const user: User = {
  name: "John",
  surname: "Doe",
  age: 18,
};

function freeze(obj: T): Readonly {
  return Object.freeze(obj);
}

const readonlyUser = freeze(user);

// Cannot assign to "name" because it is a read-only property
readonlyUser.name = "Andrew";

这时，我们会很自然的写出 Readonly 的源码，如下：

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

上面这个代码并不完整，我简单提醒下你，你就能想出来它的完整代码了，想一下如何去除有 readonly 属性的工具函数。完整版 Readonly 是不是已经出现在你的脑海里了，没错只是简单的在 readonly 前面加个加号：

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

TypeScript 没有给出去除 Readonly 修饰符工具函数此时我们就可以自己来实现了，我们把这个工具类型叫 NonReadonly。

type position = { readonly x: string; readonly y: string};

type NonReadonly = {
    -readonly [P in keyof T]: T[P]
}

// type NonReadonlyPos = { x: string; y: string; }
type NonReadonlyPos = NonReadonly;

Record

Record 创造一个新类型，同时将 Keys 中所有的属性的值的类型转化为 T 类型。

// { x: string; y: string }
type Type = Record<"x" | "y", string>;

Record 可以常用来组合：

interface UserInfo {
  age: number;
}

type UserName = "john" | "andrew" | "elon" | "jack";

const userList: Record = {
  john: { age: 18 },
  andrew: { age: 20 },
  elon: { age: 49 },
  jack: { age: 56 },
};

源码实现：

type Record = {
    [P in K]: T;
};

泛型约束 K extends 相信你能看懂，keyof any 你可能有点犯迷糊，keyof any 表示对象 key 的类型，所以 keyof any === string | number | symbol，不信你可以复制以下代码，在 TS 环境测试下：

// type unionKeyType = string | number | symbol
type unionKeyType = keyof any;

Exclude

Exclude 通过排除类型中可分配给 ExcludedUnion 的所有联合成员来创建新类型：

// "x" | "y"
type ExcludedType = Exclude<"x" | "y" | "z", "z">;

确定从对象中获取固定的 key 非常有用：

interface User {
  name: string;
  surname: string;
  personalNumber: number;
}

type AllowedKeys = Exclude;

const getUserProperty = (user: User, key: AllowedKeys) => user[key];

const user: User = {
  name: "John",
  surname: "Doe",
  personalNumber: 999999999,
};

const nameProp = getUserProperty(user, "name");
const surnameProp = getUserProperty(user, "surname");

// Argument of type "personalNumber" is not assignable to parameter of type "name" | "surname"
const personalNumberProp = getUserProperty(user, "personalNumber");

源码展现，就一个简单的条件类型。

type Exclude = T extends U ? never : T;

Extract

Extract 是 Exclude 的反面。

它通过从可分配给联合的类型中提取所有联合成员来创建新类型。

// "x" | "y"
type ExtractedType = Extract<"x" | "y" | "z", "x" | "y">;

用来提取两个类型的公有属性名会非常的合适：

interface Human {
  id: string;
  name: string;
  surname: string;
}

interface Cat {
  id: string;
  name: string;
  sound: string;
}

// "id" | "name"
type CommonKeys = Extract;

源码展示：

type Extract = T extends U ? T : never;

Pick

Pick 的作用是将 Type 类型中的 Keys 类型提取出来，创建为一个新类型。

type LongType = {
  a: string;
  b: string;
  c: string;
  d: string;
};

// { a: string; b: string }
type ShortType = Pick;

Pick 创建的类型是 Type 类型的子类型，所以它的使用常常是从一个大类型中提取某些小类型。

interface User {
  name: string;
  surname: string;
  street: string;
  house: number;
}

type UserAddress = Pick;

const address: UserAddress = {
  street: "Street",
  house: 1,
};

源码实现，注意下泛型约束 K extends keyof T。

type Pick = {
    [P in K]: T[P];
};

Omit

Omit 从 Type 的所有属性中，移除 Keys 键用剩下的键来创建新类型。

type LongType = {
  a: string;
  b: string;
  c: string;
  d: string;
};

// { c: string; d: string }
type ShortType = Omit;

这个用来删除类型中的某些不要的属性非常有用:

interface User {
  name: string;
  surname: string;
  personalNumber: number;
}

type CleanUser = Omit;

const getUserData = (user: User): CleanUser => {
  const { personalNumber, ...rest } = user;
  return rest;
};

源码展示， Pick 的实现用到了 Exclude 来实现的：

type Omit = { [P in Exclude]: T[P]; }

如果你用较早期的 TS ,Omit 的实现可能是这样的，效果一样，思路不通而已：

type Omit = Pick>; 

keyof any 等价于 number | string | symbol，我们知道 number | string | symbol 是能作为对象的 key 的类型，也就是说 Omit 移除键的时候，keys 可以不为 Type 里面的 key ，简单来讲写法更加宽松。

那么问题来了，移除 key 照理说应该是移除对象里面的 key ，即 K extends keyof any 应该改为 K extends keyof T，TS 没有这么做的道理是啥捏？

原因我想破了脑袋也没想到，去 Github 搜了下，发现大家普遍的需求是让 Omit 的写法更严谨，TS 官方答应着，并没实现，点击了解 "Omit" type using "keyof any" instead of "keyof T"

如果说，我们想要一个严格的 Omit，我们可以把 Omit 的 K extends keyof any 改为 K extends keyof T 自己实现一个较为严格的 Omit，我们叫它 Remove ，源码：

type Remove = { [P in Exclude]: T[P]; }

interface IPerson {
    age: number;
    name: string;
}

type noAge = Remove; // yes type noAge = { name: string; }
type noRandomKey = Remove; // no

NonNullable

NonNullable 通过从类型中排除 null 和 undefined 来创建新类型。

基本上，它是 Exclude 的缩写：

type Type = string | null | undefined; 

// "string"
type NonNullableType = NonNullable;

Parameters

参数从函数类型 Type 的参数中使用的类型构造元组类型：

const addNumbers = (x: number, y: number) => {
  return x + y;
};

// [x: number, y: number]
type FunctionParameters = Parameters;

使用 addNumbers 的时候为什么还要加上 typeof 呢？因为 addNumbers 是 JS 代码实现，我们需要的是函数签名，所以加上 typeof ，如果我们直接给一个函数签名，就不需要加上 typeof ，例如：

type addNumbers = (x: number, y: number) => number;

// [x: number, y: number]
type FunctionParameters = Parameters;

您还可以检索单个参数：

const addNumbers = (x: number, y: number) => {
  return x + y;
};

// "number"
type FirstParam = Parameters[0];

// "number"
type SecondParam = Parameters[1];

// "undefined"
type ThirdParam = Parameters[2];

如果获取函数参数的类型以确保类型安全很有用，尤其是在外部使用时：

const saveUser = (user: { name: string; surname: string; age: number }) => {
  // ...
};

const user: Parameters[0] = {
  name: "John",
  surname: "Doe",
  age: 18,
};

源码展示，仔细看这个条件泛型，尤其是 infer R：

type Parameters any> = T extends (...args: infer P) => any ? P : never;

ConstructorParameters

ConstructorParameters 根据构造函数的类型构造元组或数组类型。

基本上，它类似于参数，但适用于类构造函数：

class UserManager {
  private name: string;
  private surname: string;

  constructor(user: { name: string; surname: string }) {
    this.name = user.name;
    this.surname = user.surname;
  }
}

// "[user: { name: string, surname: string} ]"
type UserManagerConstructorParams = ConstructorParameters;

与 Parameters 类型相同，当我们外部使用时，它有助于确保构造函数接受我们的参数：

class UserManager {
  private name: string;
  private surname: string;

  constructor(user: { name: string; surname: string }) {
    this.name = user.name;
    this.surname = user.surname;
  }
}

const params: ConstructorParameters[0] = {
  name: "John",
  surname: "Doe",
};

源码展示：

type ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never;

ReturnType

ReturnType 构造函数Type的返回类型的类型：

const getUser = () => ({
  name: "John",
  surname: "Doe",
  age: 18,
});

// { name: string; surname: string; age: number; }
type FunctionReturnType = ReturnType;

与 Parameters 和 ConstructionParameters 一样，当您外部使用并希望获得导入函数的返回类型时，它很有用：

const getUser = () => ({
  name: "John",
  surname: "Doe",
  age: 18,
});

type User = ReturnType;

const user: User = {
  name: "Andrew",
  surname: "Hopkins",
  age: 20,
};

源码展示：

type ReturnType any> = T extends (...args: any) => infer R ? R : any;

InstanceType

InstanceType构建一个类型包括实例类型的构造函数的类型。

基本上，它类似于 ReturnType，但作用于类构造函数：

class UserManager {
  name: string;
  surname: string;

  constructor(user: { name: string; surname: string }) {
    this.name = user.name;
    this.surname = user.surname;
  }
}

// { name: string; surname: string }
type UserMangerInstanceType = InstanceType;

您可能不会这样做，因为您可以直接使用 UserManager 类型：

class UserManager {
  name: string;
  surname: string;

  constructor(user: { name: string; surname: string }) {
    this.name = user.name;
    this.surname = user.surname;
  }
}

const user2: UserManager = {
  name: "John",
  surname: "Doe",
};

源码展示：

type InstanceType any> = T extends new (...args: any) => infer R ? R : any;

ThisParameterType

提取函数 this 的类型，若函数类型并没有此参数，则提取为 unknown 类型。

function toHex(this: Number) {
  return this.toString(16);
}

function numberToString(n: ThisParameterType) {
  return toHex.apply(n);
}

因为 this 指向的问题，项目中并不常用.

源码展示：

type ThisParameterType = T extends (this: infer U, ...args: any[]) => any ? U : unknown;

最后

以上源码展示，均可在 TypeScript 项目的 ./node_modules/typescript/lib/lib.es5.d.ts 路径找到。

因为官方文档实施更新的缘故，此文章可能过时，请以官方文档为准：utility-types