typescript - Hvordan tipe currentTarget på addEventListener

Jeg bruker denne koden

document.addEventListener('click', (event) => {
    const { className, id, src = null, href = null } = event.currentTarget as HTMLElement;

    console.log(className, id, src, href);
});

Her kan currentTarget være hva som helst, en div, knapp, lenke osv. Jeg kan ikke tilordne currentTarget som HTMLElement fordi noen egenskaper mangler i typedefinisjonen (href og src)

Som en løsning utvider jeg for øyeblikket HTMLElement på denne måten

interface CustomHTMLElement extends HTMLElement {
    target?: string;
    href?: string;
    src?: string;
}

Er løsningen min den beste, eller bør jeg bruke en enum-type (HTMLDivElement | HTMLButtonElement | HTMLAnchorElement | ...)? Eller noe annet?

Codesandbox

Svar #1

Siden arrangementet ditt bokstavelig talt kan være hva som helst, kan du ikke gjøre noe her.

Du må sjekke currentTarget med instanceof når du får tilgang til spesifikke egenskaper.

document.addEventListener('click', (event) => {
    if (event.currentTarget instanceof Element) {
        const { className, id } = event.currentTarget;
        const src = (event.currentTarget instanceof HTMLImageElement && event.currentTarget.src) || null;
        const href = (event.currentTarget instanceof HTMLAnchorElement && event.currentTarget.href) || null;

      console.log(className, id, src, href);
    }
});

Men her kan href og src være null fordi de kanskje ikke finnes på andre elementer.

Svar #2

Hvis din currentTarget kan være hva som helst og hvis du ikke trenger tilgang til noen egenskap, gjør den any.

Hvis du trenger å utføre noen handlinger for noen typer, kan du gjøre det slik:

if (event.currentTarget instanceof HTMLAnchorElement) {
  // You can use: event.currentTarget.href
}

Relaterte artikler