Visual Studio Shows Wrong Value For `this` In Typescript

Consider following code: class Person{ firstname = ko.observable(); lastname: ko.observable(); fullname = ko.computed(()=>{ // B

Solution 1:

Due to how the "this" keyword works in javascript Typescript creates the "_this" alias for you. This is by design, and is great when you know how it works.

Your example:

classPerson{
    firstname = ko.observable<string>();
    lastname: ko.observable<string>();
    fullname = ko.computed(
        () => {
            // Breakpoint herereturnthis.firstname() + ' ' + this.lastname();
    });
}

Compiles to:

varPerson = (function () {
    functionPerson() {
        var _this = this;
        this.firstname = ko.observable();
        this.lastname = ();
        this.fullname = ko.computed(function () {
            // Breakpoint herereturn _this.firstname() + ' ' + _this.lastname();
        });
    }
    returnPerson;
})();

This shows (as you mentioned) that "this" in your fullname computed function has been compiled to "_this". Your issue with the debugging is that Visual Studio is debugging the compiled javascript. And in javascript "this" inside the function means something else, read more about "this" in javascript here.

Typescript creates a _this reference when you use a lambda function, i.e:

classfoo {

    something: string = "some string";

    foo1 = () => { this.something }
    foo2() { this.something }
}

Compiles to:

var foo = (function () {
    functionfoo() {
        var _this = this;
        this.something = "some string";
        this.foo1 = function () { _this.something; };
    }
    foo.prototype.foo2 = function () { this.something; };
    return foo;
})();

If used correctly lambda functions in typescript solves the "this" hell from javascript. In most cases you do not need to think about when to use lambdas or functions, but in some cases you do. More information about lambda functions can be found here.

The short answer for working with this is to inspect _this when working with lambdas until it is fixed. There is an open issue for it: https://typescript.codeplex.com/workitem/1655.

Solution 2:

Well, you just stumbled on one of the hassle of JavaScript. "this is driving me crazy, but I have no idea what this is referring to". So this is not a bug, this is by design. Long story short, JavaScript rescopes this according to the context. This is particularly problematic when using libraries such as d3 (for events callbacks) or angular, or knockout in your case. This problem becomes inherintly more obvious when using TypeScript because you have to use this everywhere. You can find more documentation about the use of this on the mozilla developer network.

To circumvent your problem, the easiest solution is to keep a reference to the original this before entering your callback, and use the local variable inside, i.e.:

classPerson{
  firstname = ko.observable<string>();
  lastname: ko.observable<string>();
  varself = this;
  fullname = ko.computed(()=>{

    // Breakpoint herereturnself.firstname() + ' ' + self.lastname();

  });

This is an habit I suggest you adopt to avoid future problems, and is kind of a good practice in JavaScript.