Error message in typescript saying that function parameters don't match @TypeScript 0.9.1

Question

document.getElementById("someElement").addEventListener('click', function (event) {
    this._output.innerHTML = this.add(
        parseInt(this._x.value),
        parseInt(this._y.value)
    ).toString();

If you take a look at the above statement, you can see that it is simply some HTML that is used to attach an event-listener to a piece of DOM. Below is some code that does the same thing:

document.getElementById("someElement").addEventListener('click', (event) => {
    this._output.innerHTML = this.add(
        parseInt(this._x.value),
        parseInt(this._y.value)
    ).toString();
});

Here is the problem, in the first code sample, TypeScript does not give me any error, meaning that all paremeters for addEventListener match. However, when I use the second one, there seems to be a problem. Typescript says, "Argument Types do not match paremeters".

What can I do to fix this. I am using Typescript 0.9.1 with Webstorm 7.0 EAP.

UPDATE 1

So, I've fixed my initial problem by changing the code to the following, after looking at the main declaration file in typescript:

document.getElementById("Add").addEventListener('click',(event):void => {
    this._output.innerHTML = this.add(
        parseInt(this._x.value),
        parseInt(this._y.value)
    ).toString();

If you take a look, I just added a return type. Now, I have a new problem: Typescript complains that this._output is an unresolved variable. This is my full typeScript class:

class Calculator {
    private _x:HTMLInputElement;
    private _y:HTMLInputElement;
    private _output:HTMLSpanElement;

    constructor (xID: string, yID: string, outputID: string) {
        this._x = <HTMLInputElement> document.getElementById(xID);
        this._y = <HTMLInputElement> document.getElementById(yID);
        this._output = <HTMLInputElement> document.getElementById(outputID);

        this.makeCalculator();
    }

    add (x: number, y: number) {
        return x + y;
    }

    subtract (x: number, y: number) {
        return x - y;
    }

    makeCalculator () {
        document.getElementById("Add").addEventListener('click',(event):void => {
            this._output.innerHTML = this.add(
                parseInt(this._x.value),
                parseInt(this._y.value)
            ).toString();
        });
        document.getElementById("Subtract").addEventListener('click', (event):void => {
            this._output.innerHTML = this.subtract(
                parseInt(this._x.value),
                parseInt(this._y.value)
            ).toString();
        });
    }
}

As you can see, I am trying to make a simple calculator in typescript.

Answer 1

When you want to use the lexically escaped value of this (which refers to the class) as well we as the context value of this (e.g the this inside a jquery callback which refers to the element that raised the event etc). You cannot use fat arrow / lambdas ()=>{}. You use function, and store this for the class variable yourself.

However in your code I see that you only want to use this which refers to the class so a lambda ()=>{} is sufficient for your case. Your code compiles fine: Check it online.