ES5 transpiled fat arrow async function looses the `this`

[Ciantic]

I'm converting babel project to TypeScript, one of the issues is how TS deals with this.

Edit I can also confirm that this works also with Chrome and target es2015. So the bug is in TypeScript's es5 transpiler thingie.

Edit Problem begins in here: https://gist.github.com/Ciantic/b3c7d68cd2fd77964492cdd8243fc870#file-asynctest-js-L50 it redefines _this as empty and since JS hoists the variable, it also passes empty variable right after!

This prints "hello world" with babel, but not with typescript transpiler, the this is not defined.

Cloneable gist contains also the javascript produced by TS.

class MyComponent {
    public text = "hello world";
    say = () => {
        console.log(this.text);
    }
    onChange = async () => {
        return new Promise(() => {
            this.say();
        });
    }
    render() {
        return { onChange : this.onChange }
    }
}
let a = new MyComponent();
a.render().onChange();

tsconfig.json

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "es5",
        "lib": [
            "es2015",
            "es6",
            "dom"
        ]
    }
}

[kitsonk]

What version of TypeScript are you using? Versions prior to 2.1 do not support async/await when targeting ES5.

I re-wrote it roughly (minus dealing with the async, in ES2015) and it does produce hello world in the console:

class MyComponent {
    constructor () {
        this.text = "hello world";
        this.say = () => {
            console.log(this.text);
        }
        this.onChange = () => {
            return new Promise(() => {
                this.say();
            })
        }
    }

    render() {
        return { onChange : this.onChange }
    }
}
let a = new MyComponent();
a.render().onChange();

[Ciantic]

@kitsonk typescript@next, the issue is with async of course. It messes things up. You can see the JS in the gist.

[kitsonk]

I suspect the TypeScript core team will be interested in the actual version, as @next published daily and might help them trace down if it is a regression or an omission.

[Ciantic]

Version 2.1.0-dev.20160921

You can plainly see the error in output:

class MyComponent {
    text = "hello world";
    say = () => {
        console.log(this.text);
    }
    onTest = () => {
        return () => {
            this.say();
        }
    }
    onChange = async () => {
        return new Promise(() => {
            this.say();
        });
    }
}
let a = new MyComponent();

transpiles to

var MyComponent = (function () {
    function MyComponent() {
        var _this = this;
        this.text = "hello world";
        this.say = function () {
            console.log(_this.text);
        };
        this.onTest = function () {
            return function () {
                _this.say();
            };
        };
        this.onChange = function () { return __awaiter(_this, void 0, void 0, function () {
            _this = this;
            return __generator(this, function (_a) {
                return [2 /*return*/, new Promise(function () {
                        _this.say();
                    })];
            });
        }); var _this; }; // <-- THIS ROW CAUSES THE ERROR
    }
    return MyComponent;
}());
var a = new MyComponent();

Edit Js hoists the _this and it becomes empty. So it looses the this.

Edit also the _this = this looks suspicous, maybe the incorrect empty var _this; is meant for it, but is in the wrong place.