打字稿 addEventListener 实现

Question

我正在尝试重新创建用于训练的 JQuery。

class $ {
  private element: HTMLElement;
  constructor(selector: string, parent: Document | HTMLElement = document) {
    this.element = parent.querySelector(selector);
  }
  color(cssColor: string) {
    this.element.style.color = cssColor;
    return this;
  }
  on(event: string, callback: Function | EventListenerObject) {
    this.element.addEventListener(event, callback);
    return this;
  }
}

const btn = new $("button").color("red").on("click", () => console.log("hi"));

TypeScript 抱怨 on 方法，它说：

<块引用>

没有与此调用匹配的过载。 重载 1 of 2, '(type: "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "abort" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | " auxclick" | ... 80 多个 ... | "paste", 监听器: (this: HTMLElement, ev: Event | ... 13 more ... | ClipboardEvent) => any, options?: boolean | AddEventListenerOptions): void'，出现以下错误。 “字符串”类型的参数不能分配给“输入”类型的参数 | “进步” | “选择” | “全屏变化” | “全屏错误” | “中止” | “动画取消” | "动画结束" | “动画迭代” | “动画开始” | “辅助点击” | ... 80 多 ... | “粘贴”'。 重载 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void'，出现以下错误。 'Function | 类型的参数EventListenerObject' 不可分配给类型为 'EventListenerOrEventListenerObject' 的参数。 “Function”类型不能分配给“EventListenerOrEventListenerObject”类型。 “Function”类型中缺少“handleEvent”属性，但“EventListenerObject”类型中需要该属性。ts(2769) lib.dom.d.ts(5344, 5): 'handleEvent' 在这里声明。

我有两个问题：

1- 我怎么可能记住所有类型的 HTML 元素？！有十亿种类型，不仅仅是 .addEventListener()，JavaScript 中还有更多关于 HTML 元素的方法，我将如何利用这些类型获得 typeScript 的好处？！

2- 如何解决我的代码中的问题？