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 抱怨我的类型，我不知道如何让它快乐 w/o 使用任何。

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

What are the proper typescript types for addEventListener mousemove and it's event argument?

坦白会让你自由：

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

我发现使用 MouseEventInit 作为事件类型可以解决问题。这种类型来自 TypeScript lib.dom.ts。我正在使用 TypeScript 4.5.5。即

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

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

What are the proper typescript types for addEventListener mousemove and it's event argument?

typescript

mouseevent

mousemove

tsc

static-typing