addEventListener mousemove 及其事件参数的正确打字稿类型是什么？

Question

问题：不使用any，我的onMouseMove函数的正确类型是什么？

export class Main {
  private dTimer: number;

  constructor() {
    this.init();
  }

  private init() {
    this.mouseHandlers();
  }

  private mouseHandlers() {
    document.addEventListener('mousemove', this.onMouseMove)
  }

  private onMouseMove: EventListener = (event: MouseEvent) => {
    clearTimeout(this.dTimer);
    this.dTimer = setTimeout(() => {
      console.log(event.pageX, event.pageY)
    }, 500);
  }
}

Typescript 抱怨我的类型，我不知道如何在不使用任何类型的情况下让它开心。

main.ts(38,3): error TS2322: Type '(event: MouseEvent) => void' is not assignable to type 'EventListener'.
  Types of parameters 'event' and 'evt' are incompatible.
    Type 'Event' is not assignable to type 'MouseEvent'.
      Property 'altKey' is missing in type 'Event'.

Answer 1

addEventListener mousemove 及其事件参数的正确打字稿类型是什么？

明确会让你自由：

onMouseMove: { (event: MouseEvent): void } = (event: MouseEvent) => {
}

或者，让 TypeScript 从赋值中推断出来：

onMouseMove = (event: MouseEvent) => {
}

Answer 2

在这种情况下不需要显式类型，因为将处理程序分配给事件时将检查函数的类型。寻找例如onclick：

onclick: (this: HTMLElement, ev: MouseEvent) => any;

有类型的onclick处理程序。什么时候写：

myDomElement.onclick = myFunction;

TypeScript 会在myFunction匹配onclick类型时进行检查。所以，正如另一个答案所说，让 TypeSript 推断类型。

Answer 3

我发现使用MouseEventInitas 事件类型可以解决问题。该类型来自 TypeScript lib.dom.ts。我正在使用 TypeScript 4.5.5。IE

private onMouseMove: EventListener = (event: MouseEventInit) => {
clearTimeout(this.dTimer);
this.dTimer = setTimeout(() => {
    console.log(event.pageX, event.pageY)
}, 500);}