typescript - Hur man typar on:drop-händelsen i Svelte för att få åtkomst till dataTransfer


Jag skulle vilja skriva on:drop-händelsen korrekt med Svelte så att jag kan få tillgång till dataTransfer.

Jag har typat händelsen med den inhemska Event, men datatransfer är inte närvarande.

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

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

Detta får TypeScript att kasta ett fel:

Egenskapen 'dataTransfer' finns inte på typen 'Event'.ts(2339)

Hur skriver man korrekt på detta slags evenemang? Jag skulle helst inte vilja typa om något

Svar #1

Egenskapen dataTransfer är endast tillgänglig från vissa händelser. När du lyssnar på drop bör du lyssna på DragEvent.

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

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