Typescript没有重载匹配此对mouseover事件的调用

Question

我是Typescript的新手。当我试图将事件侦听器分配给typescript中的onmouseover事件时，我遇到了一个重载错误。我几乎可以肯定这是一个新手犯的错误。将感谢任何人的帮助。

这是我的代码：

自定义SVG类：

class CustomSVGElement {
type: string;
namespace: string;
node: Element;
constructor(type: string) {
this.type = type;
this.namespace = 'http://www.w3.org/2000/svg';
this.node = document.createElementNS(this.namespace, this.type);
return this;
}

attr(attrs: object) {
for (const [key, value] of Object.entries(attrs)) {
this.node.setAttributeNS(null, key, value);
}
return this;
}
append(element: any) {
const parent = (typeof element === 'string') ? document.querySelector(element) : element.node;
parent.appendChild(this.node);
return this;
}
addInnerHTML(innerHTML: string) {
if (innerHTML != undefined) {
this.node.innerHTML = innerHTML;
}
return this;
}
}
class Sight {
svg: any;
constructor(selector: string, width: number, height: number) {
this.svg = new CustomSVGElement(selector).attr({ width: `${width}`, height: `${height}`}).append(selector);
}
draw(type: string, attrs: object, innerHTML: string) {
return new CustomSVGElement(type).attr(attrs).addInnerHTML(innerHTML).append(this.svg);
}
}

主要分类方法：

const svg: Sight = new Sight('.svg', 1500, 600);
const svgPath = svg.draw('path', {class: "baseCategory", d: <some svg path value>}, undefined);
const onMouseOver = (e: MouseEvent) => console.log(`(${e.x}, ${e.y})`);
svgPath.node.addEventListener("mouseover", onMouseOver);

完成上述操作后，typescript编译器开始向我抛出以下错误：

No overload matches this call.
Overload 1 of 2, '(type: "fullscreenchange" | "fullscreenerror", listener: (this: Element, ev: Event) => any, options?: boolean | AddEventListenerOptions): void', gave the following error.
Argument of type '"mouseover"' is not assignable to parameter of type '"fullscreenchange" | "fullscreenerror"'.
Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void', gave the following error.
Argument of type '(e: MouseEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
Type '(e: MouseEvent) => void' is not assignable to type 'EventListener'.
Types of parameters 'e' and 'evt' are incompatible.
Type 'Event' is missing the following properties from type 'MouseEvent': altKey, button, buttons, clientX, and 20 more.ts(2769)

Answer 1

错误消息有点迟钝，但基本上Element类型过于通用，无法将MouseEvent侦听器附加到属性节点。您需要将节点设置或强制转换为更特定的类型，如HTMLElement。