typescript在调用自定义事件处理程序函数时抛出错误

46qrfjad  于 2022-11-22  发布在  TypeScript
关注(0)|答案(1)|浏览(76)

我有一个自定义事件处理函数,如下所示

/** Dispatch event on click outside of node */
export function eventHandlers(node: HTMLElement) {
  
    const handleClick = (event: MouseEvent) => {
        if (node && !node.contains(event.target as Node)) {
            node.dispatchEvent(
                new CustomEvent('click_outside')
            )
            
        }
    };

    document.addEventListener('click', handleClick, true);
  
    return {
        destroy() {
            document.removeEventListener('click', handleClick, true);
        }
    }
}

当我试图在HTML中使用它时(svelte)如下,它抛出一个错误:
类型{ class: string; "on:click_outside": (event: MouseEvent) => void; }的实参不能赋值给类型Omit<Omit<HTMLLiAttributes, "pattern" | "style" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "id" | "class" | "accesskey" | ...的形参300更多
html如下所示(svelte)

function handleClickOutside(event) {
        alert('Click outside!');
    }

<h1>Hello {name}!</h1>
<div use:clickOutside on:click_outside={handleClickOutside}>
    Click outside me!
</div>

这是什么意思,我该如何解决?

njthzxwz

njthzxwz1#

将此声明添加到app.d.ts文件中:

declare namespace svelteHTML {
    interface HTMLAttributes<T> {
        'on:click_outside'?: CompositionEventHandler<T>
    }
}

TypeScript需要知道这个自定义事件处理程序是有效的。

相关问题