Question

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

如果你看一下上面的语句，你可以看到它只是一些用于将事件监听器附加到一块DOM的HTML。下面是一些做同样事情的代码：

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

问题是，在第一个代码示例中，TypeScript没有给我任何错误，这意味着addEventListener的所有参数都匹配。但是，当我使用第二个时，似乎存在问题。打字稿说，＆＃34;参数类型与参数不匹配＆＃34;。

我该怎么做才能解决这个问题。我使用的是Typescript 0.9.1和Webstorm 7.0 EAP。

更新1

所以，在查看typescript中的主要声明文件之后，我已经通过将代码更改为以下内容来修复我的初始问题：

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

如果你看看，我刚刚添加了一个返回类型。现在，我遇到了一个新问题：Typescript抱怨this._output是一个未解决的变量。这是我的完整typeScript类：

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();
        });
    }
}

正如你所看到的，我正在尝试用打字稿制作一个简单的计算器。

Answer 1

当你想要使用词法转义值this（它引用类）时我们作为它的上下文值（例如jquery回调中的this引用引发事件的元素等）。你不能使用胖箭/ lambdas ()=>{}。您使用函数，并自己将this存储为类变量。

但是在您的代码中，我发现您只想使用引用该类的this，因此lambda ()=>{}足以满足您的需求。您的代码编译得很好：Check it online。

typescript中的错误消息，表示函数参数与@TypeScript 0.9.1不匹配

更新1

1 个答案: