带typescript的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 kitapp.d.ts中尝试了这个

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

我也尝试了HTMLProps<T>和HTMLProps<HTMLDivElement>和许多其他变化，没有任何工作。我重新启动了它的服务器25次，所以它不是。这是docs

的链接不，这不是重复的，因为我真的看了所有其他的答案，它们都不起作用。例如:example

Answer 1

我实际上也遇到了同样的问题，文档确实提供了一个很好的解决方案。我所做的就是修改我的app.d.ts来包含我的接口。下面是我的动作:

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

在html元素中可以看到viewportEnter需要与on:一起使用修改后的àpp.d。它看起来像这样:

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

在html元素中使用

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

，并按预期工作

Answer 2

正确的当前声明应该是:

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

(旧版本使用不同的名称空间/类型，请参阅迁移指南。)