苗条的打字稿上的苗条的自定义事件

Question

我在我的 svelte-typescript 项目中使用 clickOutside 指令，当我将自定义事件分配给相关元素时出现此错误

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

这是我的代码片段

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

这是我目前使用的 clickOutside 指令https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7

我是打字稿的新手，所以我真的不知道从哪里开始我的谷歌搜索，有人知道如何解决这个问题吗？感谢您的帮助

Answer 1

好吧，现有的答案对我来说只部分有效。鉴于该clickOutside操作触发名为 i 的自定义事件，click_outside得出以下解决方案：

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

Answer 2

更新日期：2023 年 7 月 23 日

新的 SvelteKit 需要这个：

这是我的src/app.d.ts文件。

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
    namespace App {
        // interface Error {}
        // interface Locals {}
        // interface PageData {}
        // interface Platform {}
    }

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

export { };

J

Answer 3

根据doc，您可以.d.ts在项目中的某处创建一个文件。并在该文件中放入以下内容：

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    onclick_outside: () => void
  }
}

请阅读文档以获取更多详细信息。

但我个人对这个问题的看法是，如果您此时不熟悉 typescript，请尽量不要将它与 svelte 一起使用。或者如果你必须，那么不要认真对待这种警告/错误。否则，您最终会与该工具搏斗很多，这会花费您更多的时间提出这样的问题，而不是为您节省时间。

我打字很流利，但我最终放弃了努力。

尽管开发团队为增强工具链付出了很多努力，但恕我直言，它离最佳状态还有很远的距离。

我理解问题的难度，cus svelte 非常灵活，在某种程度上具有异国情调，与严格而严格的打字稿完全相反，因此它们天生就不能很好地协同工作。

2021 年 4 月更新

我已经使用 svelte/TS stack 半年了。我必须收回我之前的评论。现在 svelte 可以与 TS 顺利配合！

Answer 4

这个声明对我有用

declare namespace svelte.JSX {
  interface DOMAttributes<T> {
    onclick_outside?: CompositionEventHandler<T>;
  }
}

不要忘记在中指定自定义类型声明的位置 tsconfig.json

Answer 5

对我来说以下工作有效：

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

在你的src/app.d.ts.

基于此