TypeScript display 'this' not working in Chrome debugger

I am using VS 2015 and Chrome to develop my web app. My client side code is written in TypeScript. When compiling .ts files, VS VS generates the corresponding .map files as well. (In a project, I always mark my .ts and .map files as content, so it will be served in case the client requests it. Of course, I'm going to change this practice in release.)

When debugging my client code in Chrome dev tools (F12), Chrome automatically detects / accepts .ts and .map files for a specific .js file. It's so integrated that I can't set a breakpoint in my .js because when I try it, Chrome will automatically switch to the corresponding .ts and set the breakpoint to the appropriate line there.

While this is good, then what is the problem, one may ask. Well, when in debugging the .ts file then all my member variables in the TypeScript class show up as undefined. (there are none) These variables are accessed according to the TypeScript syntax of the type this.myMember

, so I suppose Chrome (or the .map file) is misinterpreting the this

TypeScript trick . (This is not JavaScript this

, we would call it in pure JavaScript as _this

either that

or self

. So Chrome uses this this

as a real JavaScript contextual call instead of an instance this

, and that context obviously has no members like my TypeScript object should have.

To wrap this up, I don't know if the problem is in Chrome, or if it's a problem in the .map file generated by VS, but in many cases it definitely disables debugging. (Note: I am unable to debug the original .js when .map and .ts files are available.)

Sure, there is a workaround for disabling (and generating) .ts and .map files and debugging the generated .js, but it sounds a little depressing to have a display infrastructure on both the server and client side and then ignore it completely and debug machine generated .js code.