我正在将一些JavaScript代码转换为TypeScript,但我不能弄清楚jQuery EventHandler的签名应该是什么样子。
这就是我在JavaScript中拥有的东西,但简化为更通用的术语(我使用自定义事件通过元素分布某种发布-订阅或可观察模式):
Observer.prototype._subscribe = function() {
this._row.bind('onItemChanged', this, this._onChangedHandler);
};
Observer.prototype._onChangedHandler= function(event, someString, someObject) {
var that = event.data;
if (someString === '42') {
that.coolMethod(someObject);
} else if (someString === '69') {
that.otherCoolMethod(someObject);
}
};
在另一个原型中,我会调用触发器来使用事件通知观察者,并且至少包含数据的两个参数(someString 和 someObject):
Subject.prototype.foo = function() {
// Trigger the event so Observer will be notified and pass in the string and the object (or any data whatsoever)
this._element.trigger("onItemChanged", ["42", this._data]);
};
现在我在尝试用 TypeScript 编写这段代码,但我认为它应该是这个样子:
export class Observer {
private _subscribe (): void {
this._element.bind('onItemChanged', this, this._onChangedHandler);
}
private _onChangedHandler(event: JQueryEventObject, someString: string, someObject: FooBarClass) {
let that = event.data as Observer;
if (someString === '42') {
that.coolMethod(someObject);
} else if (someString === '69') {
that.otherCoolMethod(someObject);
}
}
}
这个 TypeScript 无法编译,但是给出了以下错误信息:
参数类型 '(event: JQueryEventObject, someString: string, someObject: FooBarClass) => void' 不能赋值给类型 'EventHandler | EventHandlerBase>' 的参数。 类型 '(event: JQueryEventObject, someString: string, someObject: FooBarClass) => void' 不能赋值给类型 'EventHandlerBase>'。 参数 'event' 和 't' 的类型不兼容。 类型 'Event' 不能赋值给类型 'JQueryEventObject'。
那么事件处理程序的签名(参数类型)应该是什么样子的呢?
附注:如果你愿意,可以使用 jQuery::on() 代替 jQuery::bind() 进行重写。
此外,我并不关心获得正确的“this”的各种方式,除非我真的走错了路。编辑后(第一次回复后):
正如建议的那样,我重写了我的 TypeScript 以使我的问题更加清晰。我知道可以使用“fat arrow notation”来获得正确的“this”,但是我之前已经说过,我对此不感兴趣。我想让我的方法类型安全,那么我的处理程序方法的签名应该是什么样子的呢? 这确实有效。
private _subscribe (): void {
this._element.on('onItemChanged', () => this._onChangedHandler);
}
private _onChangedHandler(event: JQueryEventObject, someString: string, someObject: FooBarClass) {
}
但是我本以为这个也应该会起作用:
private _subscribe(): void {
this._element.on('onItemChanged', (event: JQueryEventObject, someString: string, someObject: FooBarClass) => { this._onChangedHandler(event, someString, someObject); });
}
但我仍然无法获得正确的事件类型以获得类型安全。使用“任何”类型,它确实可以编译:
private _subscribe(): void {
this._element.on('onItemChanged', (event: any, someString: string, someObject: FooBarClass) => { this._onChangedHandler(event, someString, someObject); });
}