2 years ago

#46160

test-img

Agnieszka Niemiec

"No overload matches this call" error while trying to use throttle inside listener function

I'm getting a ts "No overload matches this call" error while using throttled event handler. Not sure how to properly type this. Here's my code:

export default function App() {
  const scrollArea = useRef<HTMLDivElement>(null);
  const [scrollY, setScrollY] = useState(0);


  useEffect(() => {
    const updateScrollPosition: MouseEventHandler = (e) => {
      if (e && e.currentTarget) {
        setScrollY(e.currentTarget.scrollTop);
      }
    };
    const throttledSetScrollY: DebouncedFunc<MouseEventHandler<Element>> = throttle(updateScrollPosition, 300);
    if (scrollArea && scrollArea.current) {
      // TS underlines throttledSetScrollY
      scrollArea.current.addEventListener('scroll', throttledSetScrollY, false);
    }
  }, [scrollY]);


  return (
    <Suspense fallback={<span>loading...</span>}>
      <Canvas camera={{ fov: 35 }}>
        <Content scrollY={scrollY} />
      </Canvas>
      <ScrollArea ref={scrollArea} />
    </Suspense>
  );
}

This is the error I'm getting:

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

Will appreciate any help.

typescript

listener

addeventlistener

throttling

debouncing

0 Answers

Your Answer

Accepted video resources