詳解Typescript裡的This的使用方法
this可以說是Javascript裡最難理解的特性之一瞭，Typescript裡的 this 似乎更加復雜瞭，Typescript裡的 this 有三中場景，不同的場景都有不同意思。
- this 參數: 限制調用函數時的 this 類型
- this 類型: 用於支持鏈式調用，尤其支持 class 繼承的鏈式調用
- ThisType: 用於構造復雜的 factory 函數
this 參數
由於 javascript 支持靈活的函數調用方式，不同的調用場景，this 的指向也有所不同
- 作為對象的方法調用
- 作為普通函數調用
- 作為構造器調用
- 作為 Function.prototype.call 和 Function.prototype.bind 調用
對象方法調用
這也是絕大部分 this 的使用場景，當函數作為對象的 方法調用時，this 指向該對象
const obj = {
name: "yj",
getName() {
return this.name // 可以自動推導為{ name:string, getName():string}類型
},
}
obj.getName() // string類型
這裡有個坑就是如果對象定義時對象方法是使用箭頭函數進行定義，則 this 指向的並不是對象而是全局的 window，Typescript 也自動的幫我推導為 window
const obj2 = {
name: "yj",
getName: () => {
return this.name // check 報錯，這裡的this指向的是window
},
}
obj2.getName() // 運行時報錯
普通函數調用
即使是通過非箭頭函數定義的函數，當將其賦值給變量，並直接通過變量調用時，其運行時 this 執行的並非對象本身
const obj = {
name: "yj",
getName() {
return this.name
},
}
const fn1 = obj.getName
fn1() // this指向的是window，運行時報錯
很不幸，上述代碼在編譯期間並未檢查出來，我們可以通過為getName添加this的類型標註解決該問題
interface Obj {
name: string
// 限定getName調用時的this類型
getName(this: Obj): string
}
const obj: Obj = {
name: "yj",
getName() {
return this.name
},
}
obj.getName() // check ok
const fn1 = obj.getName
fn1() // check error
這樣我們就能報保證調用時的 this 的類型安全
構造器調用
在 class 出現之前，一直是把 function 當做構造函數使用，當通過 new 調用 function 時，構造器裡的 this 就指向返回對象
function People(name: string) {
this.name = name // check error
}
People.prototype.getName = function() {
return this.name
}
const people = new People() // check error
很不幸，Typescript 暫時對 ES5 的 constructor function 的類型推斷暫時並未支持 https://github.com/microsoft/TypeScript/issues/18171), 沒辦法推導出 this 的類型和 people 可以作為構造函數調用，因此需要顯示的進行類型標註
interface People {
name: string
getName(): string
}
interface PeopleConstructor {
new (name: string): People // 聲明可以作為構造函數調用
prototype: People // 聲明prototype，支持後續修改prototype
}
const ctor = (function(this: People, name: string) {
this.name = name
} as unknown) as PeopleConstructor // 類型不兼容，二次轉型
ctor.prototype.getName = function() {
return this.name
}
const people = new ctor("yj")
console.log("people:", people)
console.log(people.getName())
當然最簡潔的方式，還是使用 class
class People {
name: string
constructor(name: string) {
this.name = name // check ok
}
getName() {
return this.name
}
}
const people = new People("yj") // check ok
這裡還有一個坑，即在 class 裡 public field method 和 method 有這本質的區別 考慮如下三種 method
class Test {
name = 1
method1() {
return this.name
}
method2 = function() {
return this.name // check error
}
method3 = () => {
return this.name
}
}
const test = new Test()
console.log(test.method1()) // 1
console.log(test.method2()) // 1
console.log(test.method3()) // 1
雖然上述三個代碼都能成功的輸出 1，但是有這本質的區別
- method1: 原型方法，動態 this，異步回調場景下需要自己手動 bind this
- method2: 實例方法，類型報錯, 異步場景下需要手動 bind this
- method3: 實例方法，靜態 this, 異步場景下不需要手動 bind this
在我們編寫 React 應用時，大量的使用瞭 method3 這種自動綁定 this 的方式， 但實際上這種做法存在較大的問題
- 每個實例都會創建一個實例方法，造成瞭浪費
- 在處理繼承時，會導致違反直覺的現象
class Parent {
constructor() {
this.setup()
}
setup = () => {
console.log("parent")
}
}
class Child extends Parent {
constructor() {
super()
}
setup = () => {
console.log("child")
}
}
const child = new Child() // parent
class Parent2 {
constructor() {
this.setup()
}
setup() {
console.log("parent")
}
}
class Child2 extends Parent2 {
constructor() {
super()
}
setup() {
console.log("child")
}
}
const child2 = new Child2() // child
在處理繼承的時候，如果 superclass 調用瞭示例方法而非原型方法，那麼是無法在 subclass 裡進行 override 的，這與其他語言處理繼承的 override 的行為向左，很容出問題。 因此更加合理的方式應該是不要使用實例方法，但是如何處理 this 的綁定問題呢。 目前較為合理的方式要麼手動 bind，或者使用 decorator 來做 bind
import autobind from "autobind-decorator"
class Test {
name = 1
@autobind
method1() {
return this.name
}
}
call 和 apply 調用
call 和 apply 調用沒有什麼本質區別，主要區別就是 arguments 的傳遞方式，不分別討論。和普通的函數調用相比，call 調用可以動態的改變傳入的 this， 幸運的是 Typescript 借助 this 參數也支持對 call 調用的類型檢查
interface People {
name: string
}
const obj1 = {
name: "yj",
getName(this: People) {
return this.name
},
}
const obj2 = {
name: "zrj",
}
const obj3 = {
name2: "zrj",
}
obj1.getName.call(obj2)
obj1.getName.call(obj3) // check error
另外 call 的實現也非常有意思，可以簡單研究下其實現, 我們的實現就叫做 call2 首先需要確定 call 裡 第一個參數的類型，很明顯 第一個參數 的類型對應的是函數裡的 this 參數的類型，我們可以通過 ThisParameterType 工具來獲取一個函數的 this 參數類型
interface People {
name: string
}
function ctor(this: People) {}
type ThisArg = ThisParameterType<typeof ctor> // 為People類型
ThisParameterType 的實現也很簡單，借助 infer type 即可
type ThisParameterType<T> = T extends (this: unknown, ...args: any[]) => any
T extends (this: infer U, ...args: any[]) => any
? U
: unknown
但是我們怎麼獲取當前函數的類型呢, 通過泛型實例化和泛型約束
interface CallableFunction {
call2<T>(this: (this: T) => any, thisArg: T): any
}
interface People {
name: string
}
function ctor(this: People) {}
ctor.call2() //
在進行 ctor.call 調用時，根據 CallableFunction 的定義其 this 參數類型為 (this:T) => any, 而此時的 this 即為 ctor, 而根據 ctro 的類型定義，其類型為 (this:People) => any，實例化即可得此時的 T 實例化類型為 People, 即 thisArg 的類型為 People
進一步的添加返回值和其餘參數類型
interface CallableFunction {
call<T, A extends any[], R>(
this: (this: T, ...args: A) => R,
thisArg: T,
...args: A
): R
}
This Types
為瞭支持 fluent interface, 需要支持方法的返回類型由調用示例確定，這實際上需要類型系統的額外至此。考慮如下代碼
class A {
A1() {
return this
}
A2() {
return this
}
}
class B extends A {
B1() {
return this
}
B2() {
return this
}
}
const b = new B()
const a = new A()
b.A1().B1() // 不報錯
a.A1().B1() // 報錯
type M1 = ReturnType<typeof b.A1> // B
type M2 = ReturnType<typeof a.A1> // A
仔細觀察上述代碼發現，在不同的情況下，A1 的返回類型實際上是和調用對象有關的而非固定，隻有這樣才能支持如下的鏈式調用，保證每一步調用都是類型安全
b.A1() .B1() .A2() .B2() // check ok
this 的處理還有其特殊之處，大部分語言對 this 的處理，都是將其作為隱式的參數處理，但是對於函數來講其參數應該是逆變的，但是 this 的處理實際上是當做協變處理的。考慮如下代碼
class Parent {
name: string
}
class Child extends Parent {
age: number
}
class A {
A1() {
return this.A2(new Parent())
}
A2(arg: Parent) {}
A3(arg: string) {}
}
class B extends A {
A1() {
// 不報錯，this特殊處理，視為協變
return this.A2(new Parent())
}
A2(arg: Child) {} // flow下報錯，typescript沒報錯
A3(arg: number) {} // flow和typescript下均報錯
}
這裡還要提的一點是 Typescript 處於兼容考慮，對方法進行瞭雙變處理，但是函數還是采用瞭逆變，相比之下 flow 則安全瞭許多，方法也采用瞭逆變處理
ThisType
Vue2.x 最令人詬病的一點就是對 Typescript 的羸弱支持，其根源也在於 vue2.x 的 api 大量使用瞭 this，造成其類型難以推斷，Vue2.5 通過 ThisType 對 vue 的 typescript 支持進行瞭一波增強，但還是有不足之處，Vue3 的一個大的賣點也是改進瞭增強瞭對 Typescript 的支持。下面我們就研究下下 ThisType 和 vue 中是如何利用 ThisType 改進 Typescript 的支持的。
先簡單說一下 This 的決斷規則，推測對象方法的 this 類型規則如下，優先級由低到高
對象字面量方法的 this 類型為該對象字面量本身
// containing object literal type
let foo = {
x: "hello",
f(n: number) {
this //this: {x: string;f(n: number):void }
},
}
如果對象字面量進行瞭類型標註瞭，則 this 類型為標註的對象類型
type Point = {
x: number
y: number
moveBy(dx: number, dy: number): void
}
let p: Point = {
x: 10,
y: 20,
moveBy(dx, dy) {
this // Point
},
}
如果對象字面量的方法有 this 類型標註瞭，則為標註的 this 類型
let bar = {
x: "hello",
f(this: { message: string }) {
this // { message: string }
},
}
如果對象字面量的即進行瞭類型標註，同時方法也標註瞭類型，則方法的標註 this 類型優先
type Point = {
x: number
y: number
moveBy(dx: number, dy: number): void
}
let p: Point = {
x: 10,
y: 20,
moveBy(this: { message: string }, dx, dy) {
this // {message:string} ,方法類型標註優先級高於對象類型標註
},
}
如果對象字面量進行瞭類型標註，且該類型標註裡包含瞭 ThisType，那麼 this 類型為 T
type Point = {
x: number
y: number
moveBy: (dx: number, dy: number) => void
} & ThisType<{ message: string }>
let p: Point = {
x: 10,
y: 20,
moveBy(dx, dy) {
this // {message:string}
},
}
如果對象字面量進行瞭類型標註，且類型標註裡指明瞭 this 類型, 則使用該標註類型
type Point = {
x: number
y: number
moveBy(this: { message: string }, dx: number, dy: number): void
}
let p: Point = {
x: 10,
y: 20,
moveBy(dx, dy) {
this // { message:string}
},
}
將規則按從高到低排列如下
- 如果方法裡顯示標註瞭 this 類型，這是用該標註類型
- 如果上述沒標註，但是對象標註的類型裡的方法類型標註瞭 this 類型，則使用該 this 類型
- 如果上述都沒標註，但對象標註的類型裡包含瞭 ThisType, 那麼 this 類型為 T
- 如果上述都沒標註，this 類型為對象的標註類型
- 如果上述都沒標註，this 類型為對象字面量類型
這裡的一條重要規則就是在沒有其他類型標註的情況下，如果對象標註的類型裡如果包含瞭 ThisType, 那麼 this 類型為 T, 這意味著我們可以通過類型計算為我們的對象字面量添加字面量裡沒存在的屬性，這對於 Vue 極其重要。 我們來看一下 Vue 的 api
import Vue from 'vue';
export const Component = Vue.extend({
data(){
return {
msg: 'hello'
}
}
methods:{
greet(){
return this.msg + 'world';
}
}
})
這裡的一個主要問題是 greet 是 methods 的方法，其 this 默認是 methods 這個對象字面量的類型，因此無法從中區獲取 data 的類型，所以主要難題是如何在 methods.greet 裡類型安全的訪問到 data 裡的 msg。 借助於泛型推導和 ThisType 可以很輕松的實現，下面讓我們自己實現一些這個 api
type ObjectDescriptor<D, M> = {
data: () => D
methods: M & ThisType<D & M>
}
declare function extend<D, M>(obj: ObjectDescriptor<D, M>): D & M
const x = extend({
data() {
return {
msg: "hello",
}
},
methods: {
greet() {
return this.msg + "world" // check
},
},
})
其推導規則如下 首先根據對象字面量的類型和泛型約束對比, 可得到類型參數 T 和 M 的實例化類型結果
D: { msg: string}
M: {
greet(): todo
}
接著推導 ObjectDescriptor 類型為
{
data(): { msg: string},
methods: {
greet(): string
} & ThisType<{msg:string} & {greet(): todo}>
}
接著借助推導出來的 ObjectDescriptor 推導出 greet 裡的 this 類型為
{ msg: string} & { greet(): todo}
因此推導出 this.msg 類型為 string，進一步推導出 greet 的類型為 string，至此所有類型推完。 另外為瞭減小 Typescript 的類型推倒難度，應該盡可能的顯示的標註類型，防止出現循環推導或者造成推導復雜度變高等導致編譯速度過慢甚至出現死循環或者內存耗盡的問題。
type ObjectDescriptor<D, M> = {
data: () => D
methods: M & ThisType<D & M>
}
declare function extend<D, M>(obj: ObjectDescriptor<D, M>): D & M
const x = extend({
data() {
return {
msg: "hello",
}
},
methods: {
greet(): string {
// 顯示的標註返回類型，簡化推導
return this.msg + "world" // check
},
},
})
到此這篇關於詳解Typescript裡的This的使用方法的文章就介紹到這瞭,更多相關Typescript This內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- TypeScript中函數重載寫法
- TypeScript基本類型之typeof和keyof詳解
- Javascript中的奇葩知識,你知道嗎?
- 詳解TypeScript映射類型和更好的字面量類型推斷
- TypeScript保姆級基礎教程