关于前端:玩转TypeScript工具类型下

分割咱们 ： 有道技术团队助手 ：ydtech01 / 邮箱：ydtech@rd.netease.com

本文是《玩转 TypeScript 工具类型》系列的最初一篇，蕴含了如下几局部内容：

• ThisParameterType<Type>
• OmitThisParameter<Type>
• ThisType<Type>

快捷跳转

• 玩转 TypeScript 工具类型（上）
• 玩转 TypeScript 工具类型（中）

一. ThisParameterType<Type>

提取一个函数类型 显式 定义的 this 参数，如果没有显式定义的 this 参数，则返回 unknown。这里有如下几个须要留神的点：

• this 参数只能叫 this，且必须在参数列表的第一个地位
• this 必须是显式定义的
• 这个 this 参数在函数理论被调用的时候不存在，不须要显式作为参数传入，而是通过 call、apply 或者是 bind 等办法指定

1.1 源码解析

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

从源码能够看出对于类型参数 T 是要严格匹配 (this: infer U, …args: any[]) => any格局的，所以对于 this 参数的名称和地位都是固定的。剩下的逻辑就是对 this 参数的类型定义一个类型参数 U，在 extends 判断走 true 分支时返回 this 类型参数 U，false 分支就返回 unknown。

1.2 实战用法

显式的定义 this 类型有助于咱们在函数外部 平安的 应用 this。

function toHex(this: Number) {return this.toString(16);
}
 
function numberToString(n: ThisParameterType<typeof toHex>) {return toHex.apply(n);
}

注：定义了一个函数，要应用这个函数的类型，能够间接应用 typeof [funcName]，能够省去额定再定义一个类型申明。

二. OmitThisParameter<Type>

有了 ThisParameterType获取 this 的类型，那么如何将一个定义了 this 参数类型的函数类型中的 this 参数类型去掉呢？这就是 OmitThisParameter 做的事件。

一句话概括，就是 对于没有定义 this 参数类型的函数类型，间接返回这个函数类型，如果定义了 this 参数类型，就返回一个仅是去掉了 this 参数类型的新函数类型。

2.1 源码解析

type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;

仿佛有点长，其实就是两个嵌套的 extends条件判断，分成两局部就很好了解了，首先 是：

unknown extends ThisParameterType<T> ? T : ...

对于传入的函数类型 T，首先应用 ThisParameterType 获取 this 参数的类型，可能有两种后果一种是 胜利拿到 this 参数类型并返回，另一种是 unknown。所以如果返回的是 unknown，那么就是走 true 分支，间接返回 T。如果不是返回的 unknown，那么就走 false 分支，即：

T extends (...args: infer A) => infer R ? (...args: A) => R : T

又是一个条件判断，即只有 T 是一个非法的函数类型，就肯定满足 (…args: infer A) => infer R，剩下的就是对参数定义一个类型参数 A，对返回值定义一个类型参数 R，返回(…args: A) => R ，这个新的函数类型曾经不蕴含 this 了。

2.2 实战用法

function toHex(this: Number) {return this.toString(16);
}
 
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);
 
console.log(fiveToHex());

三. ThisType<Type>

这个工具类型十分非凡，第一个非凡之处就是它的 源码定义 ，是一个 空接口：

/**
 * Marker for contextual 'this' type
 */
interface ThisType<T> {}

那么 ThisType 的作用是什么呢？正如官网正文所写的：作为上下文 this 类型的标记。

要应用 ThisType 必须保障 noImplicitThis 配置开启，后续咱们只探讨开启的状况

那么如何了解这句话呢？咱们须要从实际效果来了解，先看如下这段代码：

let demo1 = {
  a: 'lipengpeng',
  test(msg: string) {this;}
};

它的 this 类型是什么呢？

this: {
    a: string;
    test(msg: string): void;
}

也能够手动指定 this 类型，比方：

let demo2 = {
  a: 'lipengpeng',
  test(this:{a: string}, msg: string) {this;}
};

这时的 this 类型就是

this: {a: string}

其实这只是 现实状况下的 this 类型剖析 ，因为 TypeScript 是通过动态代码剖析推断出的类型，在理论运行阶段的 this 是可能发生变化的，那么咱们 如何指定运行阶段的 this 类型呢？。

如果只看如上两种状况，可能感觉不必 ThisType 也足够了，因为 TypeScript 会推断 this 类型，然而这只是简略状况，就如咱们之前提到的，运行阶段的 this 是能够扭转的，所以仅是依赖代码剖析是无奈预测到将来的 this 类型的，这时候就须要借助咱们的配角—— ThisType 了。咱们持续从理论的应用场景动手，理论开发中咱们定义一个对象有时候会给一个数据结构，就相似于 Vue2.x Options API：

let options = {
  data: {
    x: 0,
    y: 0
  },
  methods: {moveBy(dx: number, dy: number) {
      this.x += dx;
      this.y += dy;
    }
  }
}

咱们心愿在 moveBy 的 this 对象上能够间接获取到 data 对象中的 x 和 y。为了实现这个性能，咱们须要对定义的数据结构做一些解决，让 methods 和 data 中的属性共享同一个 this 对象，因而咱们须要一个工具办法 makeObject：

function makeObject(config) {let data = config?.data || {}
  let methods = config?.methods || {}
  return {
    ...data,
    ...methods
  }
}

let options = makeObject({
  data: {
    x: 0,
    y: 0
  },
  methods: {moveBy(dx: number, dy: number) {
      this.x += dx;
      this.y += dy;
    }
  }
})

办法也很简略，就是把 data 和 methods 开展，放在同一个对象 options 中，当咱们通过 options.moveBy() 的形式调用 moveBy 的时候，moveBy 的 this 就是这个对象。性能实现了，那么如何实现类型平安呢？接下来就须要在 makeObject 办法上做一些改变了，重点就是定义 参数类型 和返回值类型：

// 只思考传入 makeObject 的 config 参数只蕴含 data 和 methods 两个参数
// 定义两个泛型参数 D & M 来代表它们的类型
type ObjectConfigDesc<D, M> = {
  data: D
  methods: M
}

function makeObject<D, M>(config: ObjectConfigDesc<D, M>): D & M {let data = config?.data || {}
  let methods = config?.methods || {}
  return {
    ...data,
    ...methods
  } as D & M
}

此时 options 对象的类型曾经是类型平安的了。然而咱们最关怀的 moveBy 中的 this 对象却依然会报类型正告，但咱们晓得在理论的运行过程中，moveBy 中的 this 对象曾经能够取到 x 和 y 了，最初一步就是 明确通知 TypeScript 这个 this 对象的实在类型了，非常简单，利用 ThisType：

type ObjectConfigDesc<D, M> = {
  data: D
  methods: M & ThisType<D & M>
}

这时候再看 options 的类型提醒曾经是正确的了：

let options: {
    x: number;
    y: number;
} & {moveBy(dx: number, dy: number): void;
}

大家能够在 TypeScript Playground 中亲手试一试，感触会更粗浅一些。

留神：ThisType 仅反对在对象字面量的上下文中应用，在其余中央应用作用等同于空接口。

四. 结束语

截止到这里，《玩转 TypeScript 工具类型》系列总计三篇就全副实现了，写这个系列其实就是想记录本人学习过程中的一些学习思路和感触，同时通过文章的形式写下来加深本人的了解，所以如果有任何谬误的中央欢送批评指正。