在Svelte与TypeScript中如何为点击处理器设置正确类型？

问题描述 #

我正在使用Svelte搭配TypeScript，现有一个按钮组件：

<button on:click|preventDefault={clickHandler}>
   Click me
</button>

尝试为点击处理器设置类型时，我写了：

export let clickHandler: MouseEventHandler<HTMLButtonElement>;

之前用Function类型时收到TS错误提示：

Type 'Function' is not assignable to type 'MouseEventHandler'.

但现在出现新错误 Cannot find name 'MouseEventHandler'，因为Svelte未导出这个类型，找不到对应的导入路径。

解决方法 #

MouseEventHandler是React生态的专属类型，并非Svelte内置，所以在Svelte中无需使用它。你可以通过以下两种方式设置正确类型：

• 直接使用TypeScript DOM事件函数类型
  直接定义接收MouseEvent对象的函数类型，这是最简洁的方式：

  export let clickHandler: (event: MouseEvent<HTMLButtonElement>) => void;
  

• 使用Svelte内置的EventHandler类型
  从svelte包中导入官方提供的EventHandler类型，结合DOM事件类型使用：

  import type { EventHandler } from 'svelte';
  
  export let clickHandler: EventHandler<MouseEvent<HTMLButtonElement>>;
  

以上两种方式都能准确匹配Svelte点击事件处理器的类型要求，彻底解决TS类型报错问题。

内容的提问来源于stack exchange，提问作者mikemaccana