創建了一個“重學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，如下圖所示：

without-this-param

二、使用 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 類型，如下圖所示：

with-this-param

在 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 還能這樣玩

總結

以上是生活随笔為你收集整理的typescript设置默认值_TypeScript 中神奇的 this 类型声明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。