Svelte（svelte-kit）类型自定义动作事件与打字稿

Question

我正在使用下面的 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);
    },
  };

当我将鼠标悬停在：clickoutside={() => {}} 上时，我仍然遇到此错误

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

我在 svelte 套件中尝试过这个app.d.ts

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

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

不，这不是重复的，因为我确实浏览了所有其他答案，但它们不起作用。像这个：例子

Answer 1

实际上我也遇到了同样的问题，文档确实提供了一个很好的解决方案。\n我所做的是修改我的app.d.ts界面以包含我的界面。\n这是我的操作：

\n

import { browser } from \'$app/environment\'\n\nlet iob: IntersectionObserver\n\nconst initializeIob = () => {\n  console.log(\'called\')\n\n  iob = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      const customEventName = entry.isIntersecting\n        ? \'viewportEnter\'\n        : \'viewportExit\'\n      entry.target.dispatchEvent(new CustomEvent(customEventName))\n    })\n  })\n}\n\nconst viewport = (element: HTMLElement) => {\n  if (!iob && browser) initializeIob()\n\n  iob.observe(element)\n\n  return {\n    destroy() {\n      iob.unobserve(element)\n    },\n  }\n}\n\nexport default viewport\n

\n

你可以看到我需要在我的html 元素viewportEnter中使用它\n修改后的 \xc3\xa0pp.d.ts` 看起来像这样：on:

\n

declare global {\n  namespace App {\n    // interface Error {}\n    // interface Locals {}\n    // interface PageData {}\n    // interface Platform {}\n  }\n  namespace svelteHTML {\n    interface HTMLAttributes<T> {\n      \'on:viewportEnter\'?: (event: CustomEvent) => void\n      \'on:viewportExit\'?: (event: CustomEvent) => void\n    }\n  }\n}\n\nexport {}\n

\n

在我的html 元素中使用它

\n

<h1\n  style="text-align: center;"\n  use:viewport\n  on:viewportEnter={() => {\n    console.log("Entered");\n  }}\n  on:viewportExit={() => {\n    console.log("Exit");\n  }}\n>\n  Hello Actions with Intersection observer!\n</h1>\n

\n

它按预期工作。

\n

Answer 2

当前正确的声明应该是：

declare namespace svelteHTML {
    interface HTMLAttributes<T> {
        'on:clickoutside'?: (event: CustomEvent) => void;
    }
}

（旧版本使用不同的命名空间/类型，请参阅迁移指南。）