Svelte Kit中TypeScript自定义clickOutside事件类型报错问题

问题重现 #

实现了如下自定义clickOutside Action：

export function clickOutside(node: HTMLElement) {
 function detect({ target }: MouseEvent) {
   if (!node.contains(target as Node)) {
     node.dispatchEvent(new CustomEvent('clickoutside'));
    }
  }
   document.addEventListener('click', detect, { passive: true, capture: true });
   return {
     destroy() {
       document.removeEventListener('click', detect);
    },
  };
}

使用on:clickoutside={() => {}}时触发TypeScript错误：

Type '{ onclickoutside: () => void; class: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Property 'onclickoutside' does not exist on type 'HTMLProps<HTMLDivElement>'

已尝试在src/app.d.ts添加类型声明并重启TS服务器，但问题未解决：

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

解决方案 #

1. 修正类型声明的属性名 #

Svelte中on:clickoutside对应的HTML属性名是**onclickoutside**（全小写，前缀on+事件名），调整类型声明如下：

// src/app.d.ts
declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    onclickoutside?: (event: CustomEvent) => void;
  }
}

2. 确保app.d.ts被TS正确识别 #

• 确认app.d.ts位于src根目录下
• 检查tsconfig.json的include数组包含src/**/*或明确指定该文件：

  {
    "include": ["src/**/*", "src/app.d.ts"]
  }
  

3. 为Action添加类型注解 #

给clickOutside Action明确指定Svelte的Action类型，增强类型推导能力：

import type { Action } from 'svelte';

export const clickOutside: Action<HTMLElement, undefined> = (node) => {
  function detect({ target }: MouseEvent) {
    if (!node.contains(target as Node)) {
      node.dispatchEvent(new CustomEvent('clickoutside'));
    }
  }

  document.addEventListener('click', detect, { passive: true, capture: true });
  return {
    destroy() {
      document.removeEventListener('click', detect);
    },
  };
};

4. 强制刷新TS服务器 #

若以上步骤完成后仍报错，执行以下操作：

• 在VS Code中按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
• 选择「TypeScript: Restart TS Server」或「TypeScript: Reload Project」

验证 #

完成上述步骤后，组件中使用on:clickoutside时TypeScript将不再报错，且能正确推断事件类型：

<script>
  import { clickOutside } from '$lib/actions';
</script>

<div class="dropdown" use:clickOutside on:clickoutside={() => console.log('Clicked outside')}>
  Dropdown content
</div>

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