玩转TypeScript工具类型（下）

本文是《玩转TypeScript工具类型》系列的最后一篇，包含了以下几部份内容：

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

快捷跳转

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

14. ThisParameterType<Type>

提取一个函数类型显式定义的this参数，若是没有显式定义的this参数，则返回unknown。 这里有以下几个须要注意的点：

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

>> 源码解析

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。

>> 实战用法

显式的定义this类型有助于咱们在函数内部安全的使用this。

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

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

15. OmitThisParameter<Type>

有了ThisParameterType获取this的类型，那么如何将一个定义了this参数类型的函数类型中的this参数类型去掉呢？ 这就是OmitThisParameter作的事情。一句话归纳，就是对于没有定义this参数类型的函数类型，直接返回这个函数类型，若是定义了this参数类型，就返回一个仅是去掉了this参数类型的新函数类型。

>> 源码解析

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了。

>> 实战用法

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

16. 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工具类型》系列总计三篇就所有完成了，写这个系列其实就是想记录本身学习过程当中的一些学习思路和感觉，同时经过文章的方式写下来加深本身的理解，因此若是有任何错误的地方欢迎批评指正。

后续会写一些关于@vue/reactivity的源码分享和平常业务开发中的Vue Composition Utilities的实践，敬请期待～