使用 HTMLElement.prototype 添加多個 eventListeners 不起作用

Question

我擴展了HTMLElement原型以添加多個eventListener 。

我的方法

declare global {
  HTMLElement {
    addEventListeners(): any // with a 's'
  }
}

type CallBackFunction<T = void> = () => T

HTMLElement.prototype.addEventListeners() = function(events: Array<HTMLElementEventMap>, callback: CallBackFunction) {
  events.forEach((event) => {
    this.addEventListener(event, callback)
  })
}

但是上面的代碼給我：

• Type '(events: Array<keyof HTMLElementEventMap>, callback: CallBackFunction) => void' is not assignable to type '() => any'

• Object is possibly 'undefined'

首先我試過

type CallBackFunction<T = any> = () => T

還

declare global {
  HTMLElement {
    addEventListeners(): void // with a 's'
  }
}

也解決了第二個錯誤我什至檢查了但仍然沒有運氣！

if (typeof this !== 'undefined') {
  this.addEventListener(event, callback)
}

Answer 1

他們期望 function 什么都不返回（無效）。 所以，試試這個

Answer 2

我想這就是你要找的

declare global {
  interface HTMLElement {
    addEventListeners<K extends keyof HTMLElementEventMap>(type: K[], listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
  }
}

HTMLElement.prototype.addEventListeners = function (events, listener) {
  events.forEach((event) => {
    this.addEventListener(event, listener);
  });
};