Solve this error in typescript

This error is reported in typescript

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

In the above code

Use this to report an error: 'this' implicitly has type 'any' because it does not have a type annotation.

An outer value of 'this' is shadowed by this container

Cause of error

ts provides static types (strongly typed) similar to C# and java. In the global and namespace global, it directly declares that a function must use the function keyword (that is, the function keyword of js).

However, in the class, the function cannot be used to declare the method.

This is the pointing problem of this.

Just change it to this

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

Notes on using this in typescript

A recent project used typescript to write js scripts, and the results were full of errors. While fixing it, it also made me summarize how to use this in ts.

ts provides static types (strong types) similar to C# and java. Directly declare a function in the global and namespace world. You need to use the function keyword (that is, the function keyword of js), but you cannot use function to declare methods in class (class).

Let's compare how it differs from C#

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

This code puts a method in class A and delegates this method to the h field of the class program as a delegate. Finally, a h delegate is sent in the Main method, and the result is 1 ( + 1 = 0 + 1 = 1)

Let's implement the same function in TypeScript:

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


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

class Program {

    static Main(): void {
        let t = new Test();
        let a = new A();
         = ;
         = ();
        (`count is :${}`);
        // output
        // count is :101
    }
}

();// To followC#Consistent ， Static entrance provided

You will find that the result is no longer 1, but 101. The reason for the difference is that this pointer of js. In C#, this always points to the current class, and this in js can be changed. When = this in \ \ becomes the Test class. And in typescript, because the currently defined class, its this always points to the class, so TS directly uses this in js.

However, is there a way to solve this problem? Of course there is. Let's change class A

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

In this way, we turn the handle from a class method to a class variable. More importantly, we use the lamda expression in the constructor. Using the lamda expression will not change the scope of this. Because it is currently a constructor, this inside points to the current class. (It will be easier to understand after checking the generated js, and this is no longer in the function)

From the js perspective, because there is no this pointer in the function, there will be no inconsistency caused by passing it to other places

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.