创建了一个“重学TypeScript”的微信群，想加群的小伙伴，加我微信"semlinker"，备注重学TS哟

从 TypeScript 2.0 开始，在函数和方法中我们可以声明 this 的类型，实际使用起来也很简单，比如：

function sayHello(this: void) {// this: void：表示在函数体内不允许使用this}

在上面的 sayHello 函数中，this 参数是伪参数，它位于函数参数列表的第一位。为什么说 this 参数是伪参数呢？因为以上的 sayHello 函数经过编译后，并不会生成实际的参数，该函数编译成 ES5 后的代码如下：

function sayHello() {// this: void：表示在函数体内不允许使用this}

那么在实际开发中，this 参数有什么用呢？下面我们来详细介绍一下 this 参数的一些应用场景。

一、未使用 this 参数

class Rectangle {private w: number;private h: number;

constructor(w: number, h: number) {this.w = w;this.h = h;  }

  getArea() {return () => {return this.w * this.h;    };  }}

以上代码中，我们定义了一个 Rectangle 长方形类，该类中包含了两个私有的 w 和 h 属性，分别表示长方形的宽度和高度，此外还有一个 getArea 方法用于获取长方形的面积。在 getArea 方法中我们没有使用 this 参数，此时 this 的类型是 this，如下图所示：

二、使用 this 参数

class Rectangle {private w: number;private h: number;

constructor(w: number, h: number) {this.w = w;this.h = h;  }

  getArea(this: Rectangle) {return () => {return this.w * this.h;    };  }}

与前面定义的 Rectangle 长方形类不同，在 getArea 方法中，我们使用了 this 参数，之后 this 的类型是 Rectangle 类型，如下图所示：

在 Rectangle 长方形类 getArea 方法中的 this 入参只是作为一个形式上的参数，供 TypeScript 做静态检查时使用，编译后并不会生成实际的入参。

三、禁止使用 this

有些时候，我们希望在方法中，禁止用户使用 this。针对这种需求，你可以设置 this 参数的类型为 void：

class Rectangle {private w: number;private h: number;

constructor(w: number, h: number) {this.w = w;this.h = h;  }

  getArea(this: void) {return () => {return this.w * this.h;    };  }}

以上代码会提示以下异常：

Property 'w' does not exist on type 'void'.Property 'h' does not exist on type 'void'.

四、回调函数中 this

前端开发者日常经常需要跟回调函数打交道，比如在页面中监听用户的点击事件，然后执行对应的处理函数，具体示例如下：

const button = document.querySelector("button");// ?. -> TS 3.7引入的可选链button?.addEventListener("click", handleClick);

function handleClick() {console.log("Clicked!");// 'this' implicitly has type 'any' because it does not have a type annotation.this.removeEventListener("click", handleClick);}

对于以上代码，TypeScript 编译器会有以下错误提示：this 隐式具有 any 类型，这是因为它没有类型注解。为了解决这个问题，我们就可以显式指定 this 参数的类型：

const button = document.querySelector("button");button?.addEventListener("click", handleClick);

function handleClick(this: HTMLElement) {console.log("Clicked!");this.removeEventListener("click", handleClick);}

除此之外，TypeScript 2.0 还增加了一个新的编译选项：--noImplicitThis，表示当 this 表达式值为 any 类型的时候，生成一个错误信息。

五、参考资源

• function-this-parameter

• typescriptlang - typescript-2-0

▼往期精彩回顾▼在 TS 中如何实现类型保护？类型谓词了解一下在 TS 中你踩过默认值的坑么？给 ?? 运算符把坑填了！看到 TypeScript 泛型就头晕？给这是我开的方子！用上这几招，轻松实现 TS 类型提取TS 中的可辨识联合有啥用？请听我细细道来！是时候表演真正的技术了 - TS 分身之术

TypeScript never 类型

TypeScript 设计模式之适配器模式

在前端 Word 还能这样玩