Language-tools: Mendukung acara khusus pada elemen DOM asli

Dibuat pada 5 Agu 2020 · 4Komentar · Sumber: sveltejs/language-tools

Apakah permintaan fitur Anda terkait dengan masalah?
Saya mendapatkan kesalahan berikut ketika saya mencoba menambahkan acara khusus pada elemen DOM asli:

Type '{ onswipestart: (event: CustomEvent<any>) => void; onswipemove: (event: CustomEvent<any>) => void; onswipeend: (event: CustomEvent<any>) => void; style: string; class: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Property 'onswipestart' does not exist on type 'HTMLProps<HTMLDivElement>'.ts(2322)

Peristiwa khusus dikirim ke elemen div menggunakan Sveltes actions/use directive https://svelte.dev/examples#actions).

Jelaskan solusi yang Anda inginkan
Mampu mengetik cek untuk peristiwa khusus yang dikirim menggunakan tindakan Svelte pada elemen DOM asli.

Jelaskan alternatif yang telah Anda pertimbangkan
Saya dapat mencoba mengonversi div ke komponen Svelte individual, tetapi sebaiknya itu juga berfungsi pada elemen DOM asli.

konteks tambahan

The error message

Inilah cara saya mendengarkan acara khusus:

<div
  class="bottomSheet"
  class:draggable
  bind:this={bottomSheet}
  use:swipeable
  on:swipestart={handleSwipeStart}
  on:swipemove={handleSwipeMove}
  on:swipeend={handleSwipeEnd}
  style="height:{height};bottom:{bottom};transform:translateY({$coords.ty}px);"
>

Permintaan Tarik Terkait untuk acara khusus pada komponen Svelte: https://github.com/sveltejs/language-tools/pull/303

enhancement

Sumber

johanbissemattsson

Komentar yang paling membantu

Tidak tahu apakah ada cara untuk membuatnya hanya berlaku untuk elemen dengan tindakan. tetapi Anda dapat membuatnya tersedia secara global seperti ini.

declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onswipemove?: (event: CustomEvent<number> & { target: EventTarget & T }) => any;
    }
}

jasonlyu123 pada 6 Agu 2020

👍3

Semua 4 komentar

Tidak tahu apakah ada cara untuk membuatnya hanya berlaku untuk elemen dengan tindakan. tetapi Anda dapat membuatnya tersedia secara global seperti ini.

declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onswipemove?: (event: CustomEvent<number> & { target: EventTarget & T }) => any;
    }
}

jasonlyu123 pada 6 Agu 2020

👍3

Kami juga dapat meningkatkan pengetikan kami dengan "kembali ke CustomEvent<any> tetapi saya lebih suka tidak melakukannya karena orang lain mungkin mengandalkan pengetikan untuk membuat kesalahan "tidak ada" jika mereka salah mengetik suatu acara. oke dengan sesuatu seperti itu jika itu hanya diterapkan pada elemen dengan tindakan, tapi saya tidak yakin bagaimana kita akan mengimplementasikannya.
Untuk menyimpulkan jenis dari tindakan adalah tugas yang hampir mustahil saya pikir. Mungkin kita dapat menemukan cara untuk membiarkan pengguna mengetikkan tindakan secara eksplisit dan kemungkinan kejadiannya.

dummdidumm pada 6 Agu 2020

Terima kasih, membiarkan pengguna mengetik tindakan secara eksplisit atau secara eksplisit memilih kapan harus kembali ke CustomEvent<any> mungkin akan menjadi skenario kasus terbaik tetapi solusi oleh @jasonlyu123 cukup baik untuk saya sekarang. Terima kasih atas kerja bagusnya!

johanbissemattsson pada 6 Agu 2020

👍1

Saya telah melihat ini lagi dan sekarang saya terpecah tentang apa cara terbaik untuk maju.

Opsi 1: Senyapkan kesalahan

Kami dapat membungkam kesalahan jika itu adalah peristiwa on:XX pada elemen DOM dengan direktif use:YY . Kekurangannya adalah bahwa acara tersebut bertipe any secara implisit. Itu juga mungkin tidak menangkap semua kasus, karena Svelte bersifat sangat dinamis, seseorang dapat melakukan bubbling CustomEvents.

Opsi 2: Tambahkan `CustomEvent<any>` fallback

Kami pada dasarnya akan menambahkan & {[key: string]: CustomEvent<any>} ke semua pengetikan elemen intrinsik. Ini berarti atribut _any_ yang tidak tercantum di atas akan kembali ke CustomEvent<any> . Ini akan memperbaiki masalah "sifat dinamis" dan masalah "implisit apa pun" dari opsi 1. Tetapi juga salah jika seseorang menggunakan atribut khusus seperti myownAttribute .

Opsi 3: Tambahkan `any` fallback

Seperti opsi 2, hanya saja kita menambahkan fallback & {[key: string]: any} . Ini berarti apa pun yang tidak sesuai akan jatuh kembali ke mana pun. Ini paling cocok dengan sifat dinamis DOM dengan biaya tidak lagi salah ketik.

dummdidumm pada 2 Okt 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat