"this" points to wrong object while debugging TS

Topics: General
Jan 31, 2014 at 6:48 PM
Edited Jan 31, 2014 at 6:49 PM
I don't know if anybody's asked this before - I searched and couldn't spot anything - but I'm wondering if anybody else has noticed the problem I'm having with debugging TS files, namely, that the debugger always interprets any reference to this as pointing to the underlying JavaScript this, not to the TypeScript this (which is actually _this in the generated JavaScript). In other words, both in Visual Studio, and in Chrome while using source maps, if I set a watch on any variable that is prefaced with this, the variable always shows up as undefined, because the debugger is trying to get the value of the underlying JavaScript this instead of the TS generated _this.

Does that make sense?

Any workarounds for this? Or plans to fix it? It's not the end of the world, but it's been the largest debugging PITA for me for at least the last six months...
Feb 1, 2014 at 11:15 AM
Well, the generated Source Map doesn't contain references for variables so when you ask for "this" in your Browser it can only assume the JavaScript "this" because it's not aware there is another (TS) one.

Looking at the Source Map Revision 3 Proposal: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1#heading=h.mofvlxcwqzej there is a property called "names" (A list of symbol names used by the “mappings” entry.) but I personally haven't seen it in action (all compilers - including tsc - emit empty array) so I'm not sure that's the correct property to fill in.
Coordinator
Feb 3, 2014 at 2:30 PM
This is a known shortcoming that is a combination of the source map format and our debugger. Any time the compiler has to do a rename in the resulting JavaScript, you will see this issue. We'd like to come up with a better solution that can do this translation step, so that you always see the right evaluation.
Feb 3, 2014 at 4:38 PM
Thanks for the answer, Jon. You guys are doing a great job of working out the remaining kinks in TypeScript. This is just another of those rough edges. Glad to know you guys know about it.
Jun 14, 2014 at 12:08 AM
Edited Jun 14, 2014 at 12:41 AM
is there a fix or work around for this issue? I'm encountering it while working in a typescript multi-device-hybrid-app.

[UPDATE]

found a solution in my handy dandy Pro TypeScript book (thanks Steve) - hope this issue gets fixed in future release. Fix is as follows:

Before Fix:

<div data-init="MyObj.MyMethod">

After fix:

<div data-init="onInit">

<script>
   function onInit() {
        MyObj.MyMethod();
   }
</script>