Understanding this in TypeScript

By: Basarat Ali

249   2   6841

Uploaded on 04/21/2014

I hope this quick video will help clarify why you might end up with the wrong this in a TypeScript class.

Questions about this keep popping up on StackOverflow so I thought it might be worthwhile to invest the time to explain it once and for all.

Comments (2):

By anonymous    2017-09-20

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

Original Thread

Popular Videos 2435

Submit Your Video

If you have some great dev videos to share, please fill out this form.