mouseevent - Vilka är de korrekta TypeScript-typerna för addEventListener mousemove och dess eventargument?

Fråga: Utan att använda any, vad är rätt typning för min onMouseMove-funktion?

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 klagar på mina typer, och jag vet inte hur jag ska göra det nöjt utan att använda any.

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'.

Svar #1

Vilka är de korrekta TypeScript-typerna för addEventListener mousemove och dess eventargument?

Att vara tydlig kommer att göra dig fri:

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

Eller låt TypeScript härleda det från tilldelningen 🌹:

onMouseMove = (event: MouseEvent) => {
}

Svar #2

Jag har upptäckt att användning av MouseEventInit som eventtyp löser problemet. Denna typ kommer från TypeScript lib.dom.ts. Jag använder TypeScript 4.5.5, dvs.

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

Relaterade artiklar