Svelte typescript error for event Listener

Issue

Following this tutorial, I am trying to replicate the same in typescript.

export function pannable(node: Node) {
    let x: number;
    let y: number;
    function handleMousedown(event: MouseEvent) {
        x = event.clientX;
        y = event.clientY;
        node.dispatchEvent(
            new CustomEvent('panstart', {
                detail: { x, y }
            })
        );
        window.addEventListener('mousemove', handleMousemove);
        window.addEventListener('mouseup', handleMouseup);
    }
.
.
.

    node.addEventListener('mousedown', handleMousedown);

I get this error-

Argument of type '(event:MouseEvent) =>void' is not assignable to parameter of type 'EventListnerOrEventListenerObject | null'.
      Type '(event:MouseEvent) =>void' is not assignable to type 'EventListner'. 
        Types of parameters 'event' and 'evt' are incompatible.
          Type 'Event' is missing the following properties from type 'MouseEvent': altKey, button, buttons, clientX and, 21 more.

I could fix this by changing event:MouseEvent to event:Event in the function definition. But then I get-

Property clientX does not exist on type 'Event'.
Property clientY does not exist on type 'Event'.

What should be the correct types ?

Solution

The problem is Node, that is too basic a type. It does not have type definitions for the given events.

Use HTMLElement instead.

Answered By - H.B.