reactjs - 'Event' kan inte tilldelas parametern av typen 'WheelEvent'

Jag försöker ta reda på vad som är rätt type för händelsen på en fönsterscrolllyssnare, jag kan inte hitta någon referens för att åtgärda detta fel, jag ser att folk bara tilldelar typen any

const handleNavigation = (e: React.WheelEvent) => {
  if (e.deltaY > 0) {
    console.log('scrolling down')
  } else if (e.deltaY < 0) {
    console.log('scrolling up')
  }
}

useEffect(() => {
  window.addEventListener('scroll', e => handleNavigation(e))
  return () => window.removeEventListener('scroll', e => handleNavigation(e))
}, [])

TypeScript ger fel på e-parametern i händelselyssnaren

`Argument of type 'Event' is not assignable to parameter of type 'WheelEvent<Element>'`

Svar #1

Problemet är att WheelEvent är för wheel-händelsen, inte scroll-händelsen. Om du vill ha deltaY vill du ha wheel-händelsen. Om du använder den fungerar typerna. Här är ett exempel (med pilfunktionerna borttagna enligt min kommentar på frågan):

const handleNavigation = (e: WheelEvent) => { // *** Declare with the DOM"s `WheelEvent` type (not `React.WheelEvent`)
    if (e.deltaY > 0) {
        console.log("scrolling down");
    } else if (e.deltaY < 0) {
        console.log("scrolling up");
    }  
};

useEffect(() => {
    window.addEventListener("wheel", handleNavigation);                 // *** Use `wheel`
    return () => window.removeEventListener("wheel", handleNavigation); // *** Use `wheel`
}, []);

Svar #2

DOM-metoden window.addEventListener förväntar sig en DOM-EventListener

const handleNavigation = (e: Event) => {
   console.log(e.target)
}

Relaterade artiklar