2 years ago
#46160
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