使用打字稿的 Svelte（svelte-kit）类型自定义操作事件答案

【问题标题】：Svelte (svelte-kit) type custom action event with typescript使用打字稿的 Svelte（svelte-kit）类型自定义操作事件
【发布时间】：2022-12-24 00:20:38
【问题描述】：

我正在使用下面的 clickOutside 动作。

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={() => {}} 上时，这是我仍然遇到的错误

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

我在 svelte kit app.d.ts 中试过这个

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

我也尝试了HTMLProps<T>和HTMLProps<HTMLDivElement>以及许多其他变体，但没有任何效果。我重新启动了 ts 服务器 25 次，所以不是这样。这是docs的链接

不，这不是重复的，因为我从字面上浏览了所有其他答案，但它们不起作用。像这样：example

【问题讨论】：

标签： typescript svelte sveltekit

【解决方案1】：

编辑：较新版本具有不同的名称空间/类型，请参阅migration guide。

类型已过时，正确的当前声明似乎是：

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

（错误实际上说明了很多。）

【讨论】：

不起作用，我已经尝试过了。很奇怪
运行svelte-check 时出现错误吗？您的软件包和 Svelte 扩展是否是最新的？您也可以尝试重新启动 Svelte 语言服务器，如果您使用 VS Code 扩展，则有一个命令。
是的，都是最新的，我也试过 interface DOMAttributes<T extends EventTarget> { clickoutside?: (event: CustomEvent) => void;这是行不通的。我重新启动了 svelte 和 ts 服务器并删除了所有 node_modules 和 .svelte-kit 以及每个缓存，但仍然有错误。谁在乎我就让它保持原样，现在没什么大不了的，我稍后很可能会修复它很可能是偶然的。感谢帮助