Typescript无重载与此调用onmouseover事件匹配
我是个打字新手。当我试图将事件侦听器分配给typescript中的onmouseover事件时,我遇到了一个重载错误。我几乎可以肯定这是一个新手的错误。我将感谢任何人的帮助 这是我的密码: 自定义SVG类:Typescript无重载与此调用onmouseover事件匹配,typescript,svg,overloading,mouseevent,Typescript,Svg,Overloading,Mouseevent,我是个打字新手。当我试图将事件侦听器分配给typescript中的onmouseover事件时,我遇到了一个重载错误。我几乎可以肯定这是一个新手的错误。我将感谢任何人的帮助 这是我的密码: 自定义SVG类: class CustomSVGElement { type: string; namespace: string; node: Element; constructor(type: string) { this.type = type;
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);
错误消息有点迟钝,但基本上元素类型太一般,无法将MouseeEvent侦听器附加到属性节点。您需要将节点设置或强制转换为更特定的类型,如HtmleElement
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)