打字稿没有重载匹配此调用 onmouseover 事件答案

【问题标题】：Typescript No overload matches this call onmouseover event打字稿没有重载匹配此调用 onmouseover 事件
【发布时间】：2020-03-17 12:58:29
【问题描述】：

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

【问题讨论】：

标签： typescript svg overloading mouseevent

【解决方案1】：

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

【讨论】：