reactjs - TypeScript musrörelsehändelse på fönster

Jag försöker logga händelsen på mousemove på window i konsolen med React och TypeScript. Efter lite forskning och att ha tittat på liknande frågor tänkte jag att jag kunde använda MouseEvent som typ för den händelse som skickas vidare till lyssnaren.

useEffect(() => {
  const onMouseMove = (e: MouseEvent) => {
    e.preventDefault();
    console.log(e);
  };

  window.addEventListener("mousemove", onMouseMove);

  return () => {
    window.removeEventListener("mousemove", onMouseMove);
  };
}, []);

Men när jag kör det, visar det mig följande fel:

const onMouseMove: (e: MouseEvent) => void
No overload matches this call.
  Overload 1 of 2, '(type: "mousemove", listener: (this: Window, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(e: MouseEvent) => void' is not assignable to parameter of type '(this: Window, ev: MouseEvent) => any'.
      Types of parameters 'e' and 'ev' are incompatible.
        Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist
  Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void', gave the following error.
    Argument of type '(e: MouseEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
      Type '(e: MouseEvent) => void' is not assignable to type 'EventListener'.
        Types of parameters 'e' and 'evt' are incompatible.
          Type 'Event' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': altKey, button, buttons, clientX, and 18 more

Jag försökte uppdatera min syntax för eventlyssnare med några av förslagen men ingen av dem verkar lösa problemet.

const onMouseMove = (e: MouseEvent): any => {} // any as return type
const onMouseMove: EventListener = (e: MouseEvent) => {} // type as EventListener

Svar #1

Observera att React har sin egen definition av MouseEvent (och andra Event också)

När du lägger till en händelsehanterare på ett React-element måste du använda React-händelsen

<div onClick={(e: React.MouseEvent) => { console.log(e) }></div>

Men om du lägger till en händelselyssnare med DOM API, se till att den kommer från DOM

  // DOM Event not to be confused with React.MouseEvent
  const onMouseMove = (e: MouseEvent) => {
    e.preventDefault();
    console.log(e);
  };

  window.addEventListener("mousemove", onMouseMove);

  return () => {
    window.removeEventListener("mousemove", onMouseMove);
  };

TypeScript stöder DOM-händelser för boxen. Om du importerar Event från react

import { MouseEvent } from 'react';

Detta kommer att skriva över MouseEvent i DOM och TypeScript kommer inte vara glad eftersom de två typerna är olika

Relaterade artiklar