Vyhledávání na webu

dom události - Neexistuje v TypeScriptu rozhraní SubmitEvent?

TypeScript má různé rozhraní mapující události DOM. (např. KeyboardEvent, MouseEvent atd.). Můžeme je najít zde. Například jsou užitečná v Angularu při přijímání payloadu události v posluchači událostí.

Byl jsem trochu překvapen, že nemohu najít rozhraní pro SubmitEvent, které je zde popsáno.

Může někdo potvrdit a vysvětlit proč? Očekával bych, že tým TypeScriptu poskytne rozhraní pro každou událost DOM.

Odpověď č. 1

Tyto se časem mají tendenci přidávat. V současné době je to ve standardu označeno jako „pouze jedna implementace“, takže je pravděpodobnější, že to bude přidáno, až bude lépe přijato. (Věřím, že to je nyní ve dvou enginách, takže standard bude brzy aktualizován, aby to odrážel, jak věřím, protože to bude v Chromiu a Gecku).

Můžete použít Event ve všech případech, pokud skutečně nepotřebujete použít novější submitter, který je jediným přírůstkem, který SubmitEvent přináší.

Pokud skutečně potřebujete submitter, můžete snadno vytvořit svůj SubmitEvent a upravit HTMLFormElement, aby jej používal - jak je uvedeno níže.

interface SubmitEvent extends Event {
  submitter: HTMLElement; 
}

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

Když bude knihovna aktualizována, budete upozorněni, že submitter je již deklarován a můžete smazat své dočasné rozhraní.

Odpověď č. 2

TypeScript 4.4 přidal několik chybějících rozhraní do standardní knihovny definic, která nyní zahrnuje rozhraní SubmitEvent definované následovně:

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;
}

Asertování typu by mělo fungovat ihned bez jakéhokoli dalšího nastavení:

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

Dětské hřiště

Bohužel, nový interface není přidán ani do interface HTMLElementEventMap ani prostřednictvím přetížení metody addEventListener, takže budete muset využít slučování deklarací, pokud chcete plynulejší zkušenost (pro verzi onsubmit viz Fentonova odpověď):

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

Dětské hřiště

Související články