Svelte 中非标准窗口事件的 TypeScript 类型化

Question

我在 vscode 中使用带有 TypeScript 的 Svelte，并且在 vscode 中安装了 Svelte 扩展。

在我的 App.svelte 中有

<script lang="ts">
  // a bunch of code that isn't relevant. This should just show that 
  // `lang="ts"` is set (above)
</script>

// here comes the crucial part
<svelte:window on:beforeinstallprompt={functionDeclaredInTheScript} />

如您所见，在 <svelte:window> 中标签我正在使用 on:beforeinstallprompt事件是与在某些浏览器(即 Chrome)中工作的渐进式网络应用程序相关的非标准事件。不幸但可以理解的是，事件的 TypeScript 声明没有 beforeinstallprompt关于 Window 的定义目的。 (TypeScript 声明很可能来自 Svelte vscode 扩展。)

我遇到的问题是 vscode 在 on:beforeinstallprompt 处显示错误因为它认为该事件不存在。

错误信息是:

Type '{ onbeforeinstallprompt: (e: any) => void; }' is not assignable to type 'HTMLProps<Window> & SvelteWindowProps'.
Property 'onbeforeinstallprompt' does not exist on type 'HTMLProps<Window> & SvelteWindowProps'.ts(2322)

为了消除错误消息，我尝试添加一个 *.d.ts文件来扩展需要扩展的内容，但我还没有找到要扩展的内容(例如接口(interface))或如何完成的。

(注意:我知道使用 onMount() 将处理程序附加到 window.beforeinstallprompt 事件的选项，但我想知道它如何/是否与 <svelte:window> 一起工作。)

Answer 1

将其放入您的 d.ts 文件中:

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    // You can replace any with something more specific if you like
    onbeforeinstallprompt?: (event: any) => any;
  }
}

然后确保在您的 tsconfig.json 中引用了 d.ts 文件。如果它读取类似 "include": ["src/**/*"] 并且您的 d.ts 文件位于 src 中，它应该工作。您可能需要重新加载才能使更改生效。

文档:https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error