Búsqueda de sitios web

eventos DOM - ¿No existe una interfaz SubmitEvent en TypeScript?

TypeScript tiene diferentes interfaces que mapean los eventos del DOM. (por ejemplo, KeyboardEvent, MouseEvent, etc.). Podemos encontrarlas aquí. Por ejemplo, son útiles en Angular al recibir la carga útil de un evento en un listener de eventos.

Me ha sorprendido un poco no poder encontrar una interfaz para el SubmitEvent que se describe aquí.

¿Alguien puede confirmar y explicar por qué? Esperaría que el equipo de TypeScript compartiera interfaces para cada evento del DOM.

Respuesta #1

Estos tienden a añadirse con el tiempo. En este momento está marcado en el estándar como "solo implementación única", por lo que es más probable que se agregue cuando tenga una mejor adopción. (Creo que ya está en dos motores, así que el estándar se actualizará para reflejar eso pronto, creo, ya que estará en Chromium y Gecko).

Puedes usar Event en todos los casos, a menos que realmente necesites usar el más reciente submitter, que es la única adición que SubmitEvent aporta.

Si realmente necesita submitter, puede crear fácilmente su SubmitEvent y ajustar el HTMLFormElement para usarlo, como se muestra a continuación.

interface SubmitEvent extends Event {
  submitter: HTMLElement; 
}

interface HTMLFormElement {
  onsubmit: (this: GlobalEventHandlers, ev: SubmitEvent) => any | null;
}

Cuando se actualice la biblioteca, se le advertirá que submitter ya está declarado y puede eliminar su interfaz temporal.

Respuesta #2

TypeScript 4.4 agregó algunas interfaces que faltaban a la biblioteca de definiciones estándar, que ahora incluye la interfaz SubmitEvent definida de la siguiente manera:

interface SubmitEvent extends Event {
    /**
     * Returns the element representing the submit button that triggered the form submission, or null if the submission was not triggered by a button.
     */
    readonly submitter: HTMLElement | null;
}

Una aserción de tipo debería funcionar de inmediato sin ninguna configuración adicional:

{
    const form = document.querySelector<HTMLFormElement>("form");
    form?.addEventListener("submit", (event) => {
        const { submitter } = event as SubmitEvent;
        console.log(submitter?.id);
    });
}

Parque infantil

Desafortunadamente, la nueva interfaz no se agrega ni a la interfaz HTMLElementEventMap ni mediante una sobrecarga al método addEventListener, por lo que tendrás que utilizar la fusión de declaraciones si deseas una experiencia más fluida (para la versión onsubmit, consulta la respuesta de Fenton):

interface HTMLFormElement {
    addEventListener(type: "submit", listener: (this: HTMLFormElement, ev: SubmitEvent) => any, options?: boolean | AddEventListenerOptions): void;
}

{
    const form = document.querySelector<HTMLFormElement>("form");
    form?.addEventListener("submit", ({ submitter }) => {
        console.log(submitter?.id);
    });
}

Parque infantil

Artículos relacionados