将 Svelte 与 TypeScript 一起使用时，如何为单击处理程序设置正确的类型？答案

【问题标题】：How do I set the correct type for a click handler when using Svelte with TypeScript?将 Svelte 与 TypeScript 一起使用时，如何为单击处理程序设置正确的类型？
【发布时间】：2022-10-16 18:09:14
【问题描述】：

我正在使用 Svelte 和 TypeScript。我有一个按钮：

<button on:click|preventDefault={clickHandler}>
   Click me
</button>

我正在尝试为点击处理程序设置正确的类型。

export let clickHandler: MouseEventHandler<HTMLButtonElement>;

当我使用不同的类型时，我从 TS 错误中得到了MouseEventHandler<HTMLButtonElement>，例如：

类型“Function”不可分配给类型“MouseEventHandler”。

但是，Cannot find name 'MouseEventHandler' 失败了。我不知道在哪里导入类型MouseEventHandler，因为它不是由 Svelte 导出的。

将 Svelte 与 TypeScript 一起使用时，如何为单击处理程序设置正确的类型？

【问题讨论】：

标签： javascript typescript svelte eventhandler

【解决方案1】：

虽然您可以键入属性，但您可能只想转发事件：

<button on:click|preventDefault>
   Click me
</button>

（Docs - 修饰符之后）

这样，任何使用该组件的人都可以将on:click 添加到该组件。

【讨论】：

谢谢@HB！更少的代码总是好的。

【解决方案2】：

Svelte 的事件处理程序位于svelte.JSX 下：

所以点击处理程序的正确 TS 类型是：

export let clickHandler: svelte.JSX.MouseEventHandler<HTMLButtonElement>;

【讨论】：

语言功能的工作方式是首先转换组件。它们曾经被转换为 TSX，但已经对转换进行了重写，因此默认情况下可能不再是这种情况。一旦从代码库中删除旧的转换，可能会更改命名空间。
谢谢@H.B。 - 如果名称空间发生更改，我将更新要提及的答案。