Language-tools: Prise en charge des événements personnalisés sur les éléments DOM natifs

Créé le 5 août 2020 · 4Commentaires · Source: sveltejs/language-tools

Votre demande de fonctionnalité est-elle liée à un problème ?
J'obtiens l'erreur suivante lorsque j'essaie d'ajouter des événements personnalisés sur des éléments DOM natifs :

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)

Les événements personnalisés sont envoyés à un élément div à l'aide de la directive Sveltes actions/use https://svelte.dev/examples#actions).

Décrivez la solution que vous souhaitez
Pouvoir vérifier le type d'événements personnalisés envoyés à l'aide d'actions Svelte sur des éléments DOM natifs.

Décrivez les alternatives que vous avez envisagées
Je pourrais essayer de convertir la div en un composant Svelte individuel, mais de préférence, cela devrait également fonctionner sur les éléments DOM natifs.

Contexte supplémentaire

The error message

Voici comment j'écoute les événements personnalisés :

<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);"
>

Demande d'extraction associée pour les événements personnalisés sur les composants Svelte : https://github.com/sveltejs/language-tools/pull/303

enhancement

Source

johanbissemattsson

Commentaire le plus utile

Je ne sais pas s'il existe un moyen de le faire s'appliquer uniquement aux éléments avec l'action. mais vous pouvez le rendre disponible dans le monde entier comme celui-ci.

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

jasonlyu123 le 6 août 2020

👍3

Tous les 4 commentaires

Je ne sais pas s'il existe un moyen de le faire s'appliquer uniquement aux éléments avec l'action. mais vous pouvez le rendre disponible dans le monde entier comme celui-ci.

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

jasonlyu123 le 6 août 2020

👍3

Nous pourrions également améliorer nos typages avec "revenir à CustomEvent<any> mais je préférerais ne pas le faire car d'autres peuvent compter sur les typages pour lancer une erreur "n'existe pas" s'ils tapent mal un événement. Je serais d'accord avec quelque chose comme ça si cela ne s'applique qu'aux éléments avec des actions, mais je ne sais pas comment nous implémenterions cela.
Déduire le type de l'action est une tâche presque impossible, je pense. Peut-être pouvons-nous trouver un moyen de laisser l'utilisateur taper explicitement l'action et ses événements possibles.

dummdidumm le 6 août 2020

Merci, laisser l'utilisateur taper explicitement l'action ou choisir explicitement quand revenir à CustomEvent<any> serait probablement le meilleur scénario, mais la solution de @ jasonlyu123 est assez bonne pour moi maintenant. Merci pour le bon travail!

johanbissemattsson le 6 août 2020

👍1

J'ai jeté un coup d'œil à cela et maintenant je suis divisé sur la meilleure façon d'avancer.

Option 1 : Silence d'erreur

Nous pourrions faire taire l'erreur s'il s'agit d'un événement on:XX sur un élément DOM avec une directive use:YY . L'inconvénient est que l'événement est implicitement de type any. Il peut également ne pas attraper tous les cas, car Svelte est si dynamique par nature que quelqu'un pourrait créer des CustomEvents bouillonnants.

Option 2 : Ajouter `CustomEvent<any>`

Nous ajouterions essentiellement & {[key: string]: CustomEvent<any>} à tous les typages d'éléments intrinsèques. Cela signifie que _tout_ attribut qui n'est pas répertorié ci-dessus reviendra à CustomEvent<any> . Cela résoudrait le problème de "nature dynamique" et le problème "tout implicite" de l'option 1. Mais c'est également faux dans les cas où quelqu'un utilise un attribut personnalisé comme myownAttribute .

Option 3 : Ajouter `any`

Comme l'option 2, seulement que nous ajoutons un repli & {[key: string]: any} . Cela signifie que tout ce qui ne rentre pas retombe dans n'importe lequel. Cela correspond le mieux à la nature dynamique du DOM au prix de ne plus attraper de fautes de frappe.

dummdidumm le 2 oct. 2020

Cette page vous a été utile?

0 / 5 - 0 notes