Typescript "this" inside a class method

If you want this captured the TypeScript way of doing this is via arrow functions. To quote Anders:

The this in arrow functions is lexically scoped

Here is the way I like to use this to my advantage:

class test{    // Use arrow functions    func1=(arg:string)=>{            return arg+" yeah" + this.prop;    }    func2=(arg:number)=>{            return arg+10 + this.prop;    }           // some property on this    prop = 10;      }

View this in the TypeScript Playground

You can see that in the generated JavaScript this is captured outside the function call:

var _this = this;this.prop = 10;this.func1 = function (arg) {    return arg + " yeah" + _this.prop;};

so the this value inside the function call (which could be window) would not be used.

To learn more: “Understanding this in TypeScript” (4:05) – YouTube

If you write your methods like this, 'this' will be treated the way you expect.

class Main{    constructor()    {        requestAnimationFrame(() => this.update());    }    update(): void    {        requestAnimationFrame(() => this.update());    }}

Another option would be to bind 'this' to the function call:

class Main{    constructor()    {        requestAnimationFrame(this.update.bind(this));    }    update(): void    {        requestAnimationFrame(this.update.bind(this));    }}

See page 72 of the typescript language specification https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.pdf?raw=true

Arrow Function Expressions

In the example

class Messenger { message = "Hello World"; start() { setTimeout(() => alert(this.message), 3000); }};var messenger = new Messenger();messenger.start();

the use of an arrow function expression causes the callback to have the same this as the surrounding ‘start’ method. Writing the callback as a standard function expression it becomes necessary to manually arrange access to the surrounding this, for example by copying it into a local variable:

This is the actual generated Javascript:

class Messenger { message = "Hello World"; start() { var _this = this; setTimeout(function() { alert(_this.message); }, 3000); }};