Typescript: Issue with debugging “this” in VS2013 when using lambdas

[fwanicka]

I am converting some TypeScript code from using a hard-coded capture of "this":

var _this = this;
var querySucceeded = function(data){
    this.doSomething(data);
}
var test = this.executeQuery().then(function(data){
    _this.querySucceeded(data);
});

to using lambdas:

var querySucceeded = function(data){
    this.doSomething(data);
}
var test = this.executeQuery().then((data) => {
    this.querySucceeded(data);
});

TypeScript compiles the JS into something resembling the first code block and everything runs fine in the browser. The issue is when debugging in Visual Studio. When I inspect "this" after the lambda, it shows the window properties, instead of the class context.

If I debug directly in the browser, it shows the local context as it should. Is this a known issue? Maybe there is a problem with the mappings between the JS file and the TS file?

I am using VS2013 Update 4 and TypeScript 1.4.

[mhegazy]

The problem is the debugger does not know about typescript, all it knows is javascript and a source map. the source map file just lists the mappings for statements from source(.ts) to target (.js), but does not track renamed variables (e.g. _this).

We are aware of this issue, and it has been a long standing one. the issue is more pressing now as we are doing more of these rewrites with let, const, destructuring and computed properties changes.

[danmosemsft]

When 2859 is fixed this should also "just work" in the IE developer tools, ie., it will hide the translation. However the wiring has not been done in Visual Studio at this time.

[gynet]

It's still an issue with vs code with es5 and arrow function, it's really annoying should be addressed with a higher priority.