我已阅读并尝试在“(e:CustomEvent)=> void”类型的参数中找到的建议不可分配给“EventListenerOrEventListenerObject”类型的参数,但无法将它们明智地应用于我的情况
我已经接手了一个 TS2.0 的项目,我希望用它迁移到 3.1。我已经阅读了有关标题中的错误并理解它发生的原因,但我的打字稿知识在这一点上是有限的
我有这些课程:
EventTargetImpl 似乎是一个用于管理事件侦听器集合的类
class EventTargetImpl implements EventTarget {
private eventListeners: any = {};
public addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void {
if (!this.eventListeners.hasOwnProperty(type))
this.eventListeners[type] = [];
this.eventListeners[type].push(listener);
}
public dispatchEvent(event: Event): boolean {
var type = event.type;
if (!this.eventListeners.hasOwnProperty(type)) {
this.eventListeners[type] = [];
}
for (var i = 0; i < this.eventListeners[type].length; i++) {
this.eventListeners[type][i].call(this, event);
}
return true;
}
public removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void {
if (!this.eventListeners.hasOwnProperty(type))
return;
var listenerIndex = this.eventListeners[type].indexOf(listener);
if (listenerIndex === -1)
return;
this.eventListeners[type].splice(listenerIndex, 1);
}
}
InputEvent 类定义了事件名称的常量字符串,它们是某种本地版本的事件。
class InputEvent extends EventImpl
{
public static TYPE_UP = "up";
constructor(type: string) {
super(type);
}
}
..但除此之外,除了扩展 EventImpl 之外似乎没有做太多事情:
class EventImpl implements Event
{
public bubbles: boolean;
public cancelBubble: boolean;
public cancelable: boolean;
public currentTarget: EventTarget;
public defaultPrevented: boolean;
public eventPhase: number;
public isTrusted: boolean;
public returnValue: boolean;
public srcElement: Element;
public target: EventTarget;
public timeStamp: number;
public type: string;
public initEvent(eventTypeArg: string, canBubbleArg: boolean, cancelableArg: boolean): void { throw "not implemented";}
public preventDefault(): void {
this.defaultPrevented = true;
}
public stopImmediatePropagation(): void { throw "not implemented"; }
public stopPropagation(): void { throw "not implemented";}
public AT_TARGET: number;
public BUBBLING_PHASE: number;
public CAPTURING_PHASE: number;
constructor(type: string) {
this.type = type;
}
}
输入包装器。这个类似乎拥有/持有一个 HTML 元素,并且要么为元素的事件注册标准处理程序,要么将它们替换为附加到自身的处理程序,在 InputEvent 中命名的本地类型事件
class InputWrapper extends EventTargetImpl {
constructor(private element: HTMLElement) {
super();
this.attachListeners();
}
private attachListeners(): void {
var detachGlobalListeners: () => void;
var attachGlobalListeners: () => void;
var mouseUpEventHandler = (event) => {
var point = this.normaliseMouseEventCoords(event);
this.handleMouseUp(point.x, point.y, event, InputType.Mouse);
detachGlobalListeners();
};
this.element.addEventListener("mouseup", (event) => {
if (!this.globalMode) {
this.handleMouseUp(event.offsetX, event.offsetY, event, InputType.Mouse);
}
});
detachGlobalListeners = () => {
this.globalMode = false;
window.removeEventListener("mouseup", mouseUpEventHandler);
};
attachGlobalListeners = () => {
this.globalMode = true;
window.addEventListener("mouseup", mouseUpEventHandler);
};
}
private handleMouseUp(x: number, y: number, event: Event, inputType: InputType): void {
event.stopPropagation();
event.preventDefault();
this.dispatchEvent(new InputEvent(InputEvent.TYPE_UP, { x: x, y: y }, inputType));
}
}
这是使用它的地方,也是我得到错误的地方。我在上面的代码行中的 dispatchEvent 调用上也遇到了类似的错误:
var inputWrapper = new InputWrapper(this.foreground);
inputWrapper.addEventListener(InputEvent.TYPE_UP, (event: InputEvent) => {
this.handleMouseUp(event.coords.x, event.coords.y);
});
我链接了一个我已经看过的SO答案;我喜欢 jcalz 的建议,即我可以在本地事件中声明合并为 InputEvent 类型,然后使用 addEventHandler 的强类型重载,而不是字符串类型的重载,但我不知道在哪里/如何在其中执行此操作我拥有的对象/继承层次结构
我还尝试了 FrederikKrautwald 的建议,即as (e: Event) => void)
添加到内联函数的末尾,但 TypeScript 更改为抱怨
将类型 '(event: InputEvent) => void' 转换为类型 '(e: Event) => void' 可能是一个错误,因为这两种类型都没有与另一种充分重叠
JacobEvelyn 的建议的修改形式最像我在 C# 中做的那样,如果我有一个特定类型装箱在一个通用类型中:
inputWrapper.addEventListener(InputEvent.TYPE_UP, (event: Event) => {
let iv: InputEvent = (event as InputEvent);
this.handleMouseUp(iv.coords.x, iv.coords.y);
});
但我再次得到“两种类型都没有与另一种充分重叠”错误