Svelte TypeScript事件监听类型不兼容问题求解

我在用TypeScript复现Svelte官方的pannable动作功能时，编写代码遇到了类型错误。

原代码片段：

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);

添加mousedown事件监听器时出现以下错误：

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.

若将event:MouseEvent改为event:Event，则会出现新错误：

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

解决方案 #

核心问题是Node类型的事件监听器默认仅接收Event类型，而我们需要明确当前事件为MouseEvent，可以通过以下两种方式解决：

方法1：指定更具体的DOM元素类型

将参数node: Node改为node: HTMLElement（或更具体的元素类型，如HTMLDivElement），此时addEventListener会自动推断mousedown事件的类型为MouseEvent，无需额外修改：

export function pannable(node: HTMLElement) {
    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);
}

方法2：给addEventListener指定泛型类型

如果需要保留Node类型，可以在调用addEventListener时明确事件类型，让TypeScript识别这是MouseEvent：

node.addEventListener<"mousedown">('mousedown', handleMousedown);

或者通过类型断言强制转换监听器类型：

node.addEventListener('mousedown', handleMousedown as EventListener);

推荐使用方法1，因为实际场景中Svelte动作绑定的都是DOM元素，使用HTMLElement类型更精确，也能避免后续其他类型问题。

内容的提问来源于stack exchange，提问作者Hello-World