共计 3745 个字符，预计需要花费 10 分钟才能阅读完成。
分割咱们 ： 有道技术团队助手 ：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 工具类型》系列总计三篇就全副实现了，写这个系列其实就是想记录本人学习过程中的一些学习思路和感触，同时通过文章的形式写下来加深本人的了解，所以如果有任何谬误的中央欢送批评指正。
