Language-tools: Admite eventos personalizados en elementos DOM nativos

Creado en 5 ago. 2020 · 4Comentarios · Fuente: sveltejs/language-tools

¿Tu solicitud de función está relacionada con un problema?
Recibo el siguiente error cuando intento agregar eventos personalizados en elementos DOM nativos:

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)

Los eventos personalizados se envían a un elemento div usando la directiva de acciones/uso de Sveltes https://svelte.dev/examples#actions).

Describa la solución que le gustaría
Ser capaz de verificar el tipo de eventos personalizados enviados mediante acciones Svelte en elementos DOM nativos.

Describa las alternativas que ha considerado
Podría intentar convertir el div en un componente Svelte individual, pero preferiblemente también debería funcionar en elementos DOM nativos.

Contexto adicional

The error message

Así es como escucho los eventos personalizados:

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

Solicitud de extracción relacionada para eventos personalizados en componentes Svelte: https://github.com/sveltejs/language-tools/pull/303

enhancement

Fuente

johanbissemattsson

Comentario más útil

No sé si hay una manera de hacer que solo se aplique a elementos con la acción. pero puede hacer que esté disponible globalmente de esta manera.

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

jasonlyu123 en 6 ago. 2020

👍3

Todos 4 comentarios

No sé si hay una manera de hacer que solo se aplique a elementos con la acción. pero puede hacer que esté disponible globalmente de esta manera.

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

jasonlyu123 en 6 ago. 2020

👍3

También podríamos mejorar nuestras escrituras con "volver a CustomEvent<any> pero prefiero no hacerlo porque otros pueden confiar en las escrituras para arrojar un error de "no existe" si escriben mal un evento". Está bien algo así si solo se aplica a elementos con acciones, pero no estoy seguro de cómo lo implementaríamos.
Creo que inferir el tipo de la acción es una tarea casi imposible. Tal vez podamos encontrar una manera de permitir que el usuario escriba explícitamente la acción y sus posibles eventos.

dummdidumm en 6 ago. 2020

Gracias, dejar que el usuario escriba explícitamente la acción o elija explícitamente cuándo volver a CustomEvent<any> probablemente sería el mejor de los casos, pero la solución de @jasonlyu123 es lo suficientemente buena para mí ahora. Gracias por el gran trabajo!

johanbissemattsson en 6 ago. 2020

👍1

Eché un vistazo a esto nuevamente y ahora estoy dividido sobre cuál es la mejor manera de avanzar.

Opción 1: Silenciar error

Podríamos silenciar el error si es un evento on:XX en un elemento DOM con una directiva use:YY . El inconveniente es que el evento es de tipo any implícitamente. También es posible que no abarque todos los casos, porque Svelte es tan dinámico en su naturaleza que alguien podría crear CustomEvents burbujeantes.

Opción 2: agregue `CustomEvent<any>` respaldo

Básicamente, agregaríamos & {[key: string]: CustomEvent<any>} a todas las tipificaciones de elementos intrínsecos. Esto significa que _cualquier_ atributo que no esté en la lista anterior volverá a CustomEvent<any> . Esto solucionaría el problema de la "naturaleza dinámica" y el problema de "cualquiera implícito" de la opción 1. Pero también es incorrecto en los casos en que alguien usa un atributo personalizado como myownAttribute .

Opción 3: Agregar `any` respaldo

Al igual que la opción 2, solo que agregamos un respaldo de & {[key: string]: any} . Esto significa que todo lo que no encaja vuelve a caer en cualquiera. Esto se ajusta mejor a la naturaleza dinámica del DOM a costa de no detectar más errores tipográficos.

dummdidumm en 2 oct. 2020

¿Fue útil esta página

0 / 5 - 0 calificaciones