Question

我是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);

完成上述操作后，打字稿编译器开始向我抛出此错误：

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侦听器附加到属性 node 上。您需要将 node 设置或转换为更具体的类型，例如HTMLElement。

Typescript没有重载匹配此调用onmouseover事件

1 个答案: