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

Posted 2023-02-19

【中文标题】苗条打字稿上的苗条自定义事件

【英文标题】：Svelte custom event on svelte typescript

【发布时间】：2021-01-15 17:56:45

【问题描述】：

我在我的 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>'

这是我的代码的 sn-p

#if profileToolbar
<div
    transition:fly= y: -20, duration: 300 
    use:clickOutside=profileToolbarContainer
    on:click_outside=() => (profileToolbar = !profileToolbar)
    class="origin-top-right absolute right-0 mt-2 w-48 rounded-md
    shadow-lg z-10 shadow-md">

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

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

【参考方案1】：

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

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

请阅读文档了解更多详情。

---

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

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

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

我理解这个问题的难度，cus svelte 非常灵活，在某种程度上具有异国情调，与 typescript 的僵化和严格相反，因此它们天生不能很好地协同工作。

---

2021 年 4 月更新

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

【讨论】：

完美运行！，我只需要将其更改为interface HTMLProps，感谢您的帮助和建议，我知道苗条的打字稿仍然是新的，但不幸的是我不是一个做出决定的人，但我会确保记住你的话

致 hackape：我知道这有点离题，但您能否分享您在使用 Svelte 和 TS 时遇到的其他一些不便？我是该领域的维护者之一，这样的反馈非常有价值（因为它很少见）。

@dummdidumm 我知道将两者连接起来并不容易，所以对这项工作表示敬意！但是很抱歉，我没有太多要分享的内容，因为那是半年前的事了，我对具体的事情记不太清了。我只记得对这次经历的总体印象是可以接受的，但并不完全令人满意。在一天结束时，我想自己最好将 TS 的东西尽可能地保留在 .ts 文件中，然后导入到 .svelte 文件中以减少混杂并忽略警告。后来我切换回 react 的舒适世界?

我试图将 svelte repl 移植到 vscode 扩展中，但被中断然后中途放弃了。我可以抽出时间去除尘并刷新我的记忆。如果我有任何值得分享的内容，我会尽快回复您。

啊，好吧。我也想要预览功能。您是 vscode 扩展的维护者吗？

【参考方案2】：

这个声明对我有用

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

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

【讨论】：

你把这个放在哪里？

【参考方案3】：

好的，所以现有的答案对我来说只是部分有用。鉴于clickOutside 操作触发了一个名为click_outside 的自定义事件，我得出以下解决方案：

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