Svelte 中非标准 window 事件的 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 声明在 Window 对象的定义中没有 beforeinstallprompt。（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 文件来扩展需要扩展的内容，但我还没有找到要扩展的内容（例如接口）或如何完成的.

（注意：我知道使用 onMount() 将处理程序附加到 window.beforeinstallprompt 事件的选项，但我想知道 how/if 它与 <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;
  }
}

然后确保 d.ts 文件在您的 tsconfig.json 中被引用。如果它读取类似 "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

Svelte 中非标准 window 事件的 TypeScript 类型

TypeScript typing of non-standard window event in Svelte

typescript

visual-studio-code

progressive-web-apps

svelte

svelte-3