typescript中this報(bào)錯(cuò)

export class AppComponent {
  title = 'myapp';
  count=1;
  clickme=function(){
      this.count++; 
  }

在上述代碼中

使用this報(bào)錯(cuò): 'this' implicitly has type 'any' because it does not have a type annotation.

function處報(bào)錯(cuò): An outer value of 'this' is shadowed by this container

出錯(cuò)原因

ts 提供類(lèi)似C# 和 java的靜態(tài)類(lèi)型（強(qiáng)類(lèi)型）， 在全局和命名空間的全局里面 直接聲明一個(gè)函數(shù)要用到 function 關(guān)鍵字（就是js的function關(guān)鍵字），

而在類(lèi)（class）里面卻不能使用function來(lái)聲明方法。

這其中是this的指向問(wèn)題。

改成這樣就可以了

export class AppComponent {
  title = 'myapp';
  count=1;
  clickme=()=>{
    this.count++;
  }
}

typescript中this的使用注意

最近的一個(gè)項(xiàng)目，用了 typescript 來(lái)寫(xiě)js腳本，結(jié)果錯(cuò)誤百出，修復(fù)的同時(shí)也讓我總結(jié)了ts 中該怎樣使用this。

ts 提供類(lèi)似C# 和 java的靜態(tài)類(lèi)型（強(qiáng)類(lèi)型）， 在全局和命名空間的全局里面 直接聲明一個(gè)函數(shù) 要用到 function 關(guān)鍵字（就是js的function關(guān)鍵字），而在類(lèi)（class）里面卻不能使用function來(lái)聲明方法。

讓我們來(lái)比較 它與 C# 的不同

? ? public delegate int handle();
? ? public class Program
? ? {
? ? ? ? public static void Main(string[] args)
? ? ? ? {
? ? ? ? ? ? var t = new Test();
? ? ? ? ? ? var a = new A();
? ? ? ? ? ? t.h = a.hander;
? ? ? ? ? ? t.count = t.h();
? ? ? ? ? ? Console.WriteLine("count is:{0}",t.count);?
? ? ? ? ? ? // output:
? ? ? ? ? ? // count is:1
? ? ? ? }
? ? }
? ? public class Test
? ? {
? ? ? ? public handle h;
? ? ? ? public int count = 100;
? ? }
? ? public class A
? ? {
? ? ? ? private int count = 0;
? ? ? ? public int hander()
? ? ? ? {
? ? ? ? ? ? this.count +=1;
? ? ? ? ? ? return this.count;
? ? ? ? }
? ? }

這個(gè)代碼在class A里面 放了一個(gè)方法，并將這個(gè)方法作為一個(gè)委托 給了 class program 的 h 字段， 最后在 Main 方法里面運(yùn)個(gè) h委托， 結(jié)果得到了 1 這個(gè)結(jié)果（A.count + 1 = 0 + 1 = 1)

讓我們?cè)赥ypeScript 里面實(shí)現(xiàn)相同的功能：

class A {
? ? public count: number = 0;
? ? public hander(): number {
? ? ? ? this.count += 1;
? ? ? ? return this.count;
? ? }
}


class Test {
? ? public count: number = 100;
? ? public h: () => number;
}

class Program {

? ? static Main(): void {
? ? ? ? let t = new Test();
? ? ? ? let a = new A();
? ? ? ? t.h = a.hander;
? ? ? ? t.count = t.h();
? ? ? ? console.log(`count is :${t.count}`);
? ? ? ? // output
? ? ? ? // count is :101
? ? }
}

Program.Main();// 為了跟C#一致 ， 提供的靜態(tài)入口

你會(huì)發(fā)現(xiàn)，這時(shí)候結(jié)果不再是1，而是101， 造成差異的原因是js的 this 指針 ， 在 C# 中 this 總是指向當(dāng)前的類(lèi)，而 js中的this可以改變， 當(dāng) t.h = a.hander 的時(shí)候 t.h 中的this 變成了 Test 類(lèi)。 而在 typescript中，因?yàn)楫?dāng)前定義的是一個(gè)類(lèi)，所以其this 總是指向 類(lèi)，所以TS 直接使用js中的this.

然而 有辦法解決這個(gè)問(wèn)題么？ 當(dāng)然有。 讓我們來(lái)改變 class A

class A {
? ? constructor() {
? ? ? ? this.hander = ()=>{
? ? ? ? ? ? this.count += 1;
? ? ? ? ? ? return this.count;
? ? ? ? }
? ? }
? ? public count: number = 0;
? ? public hander: () => number;
}

這樣我們把hander 從類(lèi)的 方法 變成了 類(lèi)的變量，更重要的是 我們?cè)?構(gòu)造函數(shù)里面 使用 lamda 表達(dá)式 ， 使用 lamda表達(dá)式 并不會(huì)改變this的作用域, 因?yàn)楫?dāng)前是一個(gè)構(gòu)造函數(shù)，所以里面的this指向的是 當(dāng)前的類(lèi)，（查看一下生成的js會(huì)更容易理解， 函數(shù)里面已經(jīng)沒(méi)有了this）

從js的角度， 因?yàn)楹瘮?shù)中沒(méi)有了this指針，所以也就不會(huì)因?yàn)?傳遞到其他的地方造成不一致的情況

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。