Can I access the other this in a TypeScript lambda?

Question

In typescript, I can write something like this:

$('#something').fadeOut(400, (): void => {     this.invokeAnotherMethod(); }); 

When compiled, TypeScript automatically makes sure this points to my class instead of the enclosed function:

var _this = this; $('#something').fadeOut(400, function() {     _this.invokeAnotherMethod(); }); 

However, what about when I need to access the real this instead of the outer _this? Is there syntax to reference it? For example, how could I write code that would compile to the following:

var _this = this; $('#something').fadeOut(400, function() {     $(this).data('specialhide', true);     _this.invokeAnotherMethod(); }); 

Is it possible?

Answer 1

You would need to avoid the fat-arrow syntax to do this as you don't want to preserve the lexical scope of this.

var _me = this; $('#something').fadeOut(400, function () {     _me.invokeAnotherMethod();     $(this).data('specialhide', true); }); 

In this example I have used _me rather than _this to avoid any collisions with TypeScript generated variables. I have also avoided self, to avoid confusion with window.self (thanks RockResolve).

The Why!

The ECMAScript 6 specification features Arrow Function Definitions - it is where the TypeScript language has taken this feature from. When TypeScript targets ECMAScript 6 in the future, it will leave in the () => syntax - so they can't make it work with both contexts of this without breaking future compatibility.

Even though you could imagine how they could change the TypeScript compiler to make both _this and this available in ECMAScript 3 or 5, it would actually become a problem in version 6.

Answer 2

I figured a way out, as described here in my answer at: How can I preserve lexical scope in TypeScript with a callback function

This is a nicer way of achieving the closure that Steve Fenton did in his answer. I prefer it because the method signature documents usage.

Basically, use a method like so:

fadeOutLambda(outerThis: YourClass): {(d: number, i: number): number}{     return function(d: number, i: number){         // Put your "fadeOut" logic here         // refer to "this" to mean the dynamically scoped "this"         // refer to "outerThis" to refer to the class instance         alert(outerThis); // lexically scoped class instance         alert(this); // dynamically scoped context caller         return 999;     } }