#More TS help ;)

1 messages · Page 1 of 1 (latest)

versed meadow
#
 useEffect(() => {
    let eMouseLeave: EventListenerOrEventListenerObject,
      eMouseEnter: EventListenerOrEventListenerObject,
      eMouseMove: EventListenerOrEventListenerObject;
    if (!window.matchMedia("(hover:hover)").matches) return;
    const el = element.current;
    if (!el) return;

    el.addEventListener(
      "mouseleave",
      (eMouseLeave = (e) => {
        if (!window.matchMedia("(hover:hover)").matches) return;
        gsap.to(e.target, { duration: 0.5, scale: 1, x: 0, y: 0 });
        gsap.to(circle.current, {
          duration: 0.5,
          scale: 1,
          x: 0,
          y: 0,
        });
        gsap.to(innerShape.current, {
          duration: 0.5,
          scale: 1,
          x: 0,
          y: 0,
        });
      })
    );
    el.addEventListener(
      "mouseenter",
      (eMouseEnter = (e) => {
        gsap.to(e.target, { duration: 0.5, transformOrigin: "0 0", scale: 1 });
        gsap.to(circle.current, {
          duration: 0.5,
          scale: 1.2,
        });
      })
    );

    el.addEventListener(
      "mousemove",
      (eMouseMove = (e) => callParallax(e))
    );
    return () => {
      if (el) {
        el.removeEventListener("mousemove", eMouseMove);
        el.removeEventListener("mouseenter", eMouseEnter);
        el.removeEventListener("mouseleave", eMouseLeave);
      }
    };
  });```

```Argument of type 'Event' is not assignable to parameter of type 'MouseEvent'.
  Type 'Event' is missing the following properties from type 'MouseEvent': altKey, button, buttons, clientX, and 21 more.```
#
      "mousemove",
      (eMouseMove = (e) => callParallax(e))
    );``` The error is on this line at `e`
livid wadi
#

@versed meadow The callParallax function is probably expecting a React event, but you're pasing it a native one.

#

If you control the type of callParallax you can change it to either accept native events - or to be specific about what parts of event it actually uses, which would hopefully make it compatible with both.

versed meadow
#

which is what mousemove should send?

#

It seems to be erroring because of me assigning eMouseMove to it

#

eMouseMove: (e: MouseEvent) => void; this seems to fix it i think?

livid wadi
#

I'm not sure why the assignment would be causing the issue 🤔, maybe it's inferring e from the EventListenerOrEventListenerObject type that you annotated.

#

But you might simplify this and structure your code like:

const eMouseLeave = /* handler */
el.addEventListener("mouseleave", eMouseLeave);

//...

return () => {
    el.removeEventListener("mouseleave", eMouseLeave);
    // ...
};

This seems simpler than declaring the functions and assigning them as a side-effect.