在Svelte中使用自定义事件处理器触发TypeScript报错，如何解决？

错误含义 #

这个TypeScript错误的核心是：Svelte的内置类型系统仅认可原生HTML元素支持的事件，而你自定义的click_outside事件不在<div>元素的默认事件属性列表中，因此TS判定你传递了不符合类型规范的属性，抛出类型不匹配的错误。

解决方法 #

方法一：全局扩展Svelte事件类型（推荐） #

在项目src目录下创建global.d.ts文件，添加以下类型声明，让TypeScript识别自定义的click_outside事件：

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    'on:click_outside'?: (event: CustomEvent) => void;
  }
}

该方式会让所有HTML元素都能安全绑定on:click_outside事件，同时保留完整的类型检查能力。

方法二：修正工具函数的命名匹配 #

你的模板中使用了use:clickOutside，但导出的工具函数名为eventHandlers，需要保证二者名称一致：

• 要么在导入时重命名：

<script lang="ts">
  import { eventHandlers as clickOutside } from './path-to-your-handler.ts';
  function handleClickOutside(event: CustomEvent) {
    alert('Click outside!');
  }
</script>

• 要么直接修改TS文件的导出名称：

export function clickOutside(node: HTMLElement) {
  // 原函数逻辑保持不变
}

方法三：临时类型断言（不推荐） #

如果仅用于临时测试，可以通过any类型断言跳过TS检查，但会丢失类型安全性：

<div use:clickOutside on:click_outside={handleClickOutside} {...{} as any}>
    Click outside me!
</div>

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