如何在 Svelte 中键入 on:drop 事件以访问数据传输

Question

我想用 Svelte 正确输入 on:drop 事件，这样我就可以访问 dataTransfer。

我用原生 Event 键入了事件，但数据传输不存在。

<div on:drop={handleDrop}> dropzone </div>

<script lang="ts">
  function handleDrop(event: Event) {
    const files = event.dataTransfer.files
  }
</script>

这会使 typescript 抛出错误：

Property 'dataTransfer' does not exist on type 'Event'.ts(2339)

如何正确输入此类事件？我最好不要投任何东西

Answer 1

dataTransfer property is available only from some events. When listening on drop you should listen for DragEvent.

<div on:drop={handleDrop}> dropzone </div>

<script lang="ts">
  function handleDrop(event: DragEvent) {
    const files = event.dataTransfer.files
  }
</script>

如何在 Svelte 中键入 on:drop 事件以访问数据传输

How to type on:drop event in Svelte to access dataTransfer

typescript

svelte