关于前端:玩转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工具类型》系列总计三篇就全副实现了，写这个系列其实就是想记录本人学习过程中的一些学习思路和感触，同时通过文章的形式写下来加深本人的了解，所以如果有任何谬误的中央欢送批评指正。