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

I would like to correctly type the on:drop event with Svelte so I can access dataTransfer.

I've typed the event with the native Event but datatransfer is not present.

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

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

This makes typescript throw an error:

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

How to properly type this kind of events ? I would preferably not cast anything

CodePudding user response：

The 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>