typescript - Egenskapen 'dataset' eksisterer ikke på typen 'EventTarget'

Når jeg prøver å få tilgang til datasettet på en knapp etter et klikk, får jeg denne^feilen.

linkProvider = (ev: React.SyntheticEvent<EventTarget>) => {
  console.debug('ev.target', ev.target.dataset['ix']) // error
}

// in render 
providers.map((provider, ix) => (
  <button key={provider} data-ix={ix} onClick={this.linkProvider}>{provider}</button>
))

Noen ideer om hvordan man får det til å fungere?

Svar #1

Problemet er her Element, document, og window kan være en EventTarget. Du bør oppdage om din EventTarget er et element. Så i ditt tilfelle bør koden nedenfor fungere

linkProvider = (ev: React.SyntheticEvent<EventTarget>) => {
  // If event target not an HTMLButtonElement, exit
  if (!(ev.target instanceof HTMLButtonElement)) {
    return;
  }
  console.debug('ev.target', ev.target.dataset['ix']) 
}

På den korte måten

linkProvider = (ev: React.SyntheticEvent<HTMLButtonElement>) => {
  console.debug('ev.target', ev.currentTarget.dataset['ix']) 
}

Og jeg la også til et eksempel her

Svar #2

Ved å kombinere begge forslagene gitt av @Efe og @fatemefazli, kom jeg frem til en løsning som fungerer:

Som referanse, dette er grensesnittet og grunnen til at det ikke fungerer med target: (github-lenke)

interface SyntheticEvent<T> {
    /**
     * A reference to the element on which the event listener is registered.
     */
    currentTarget: EventTarget & T;

    // If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
    /**
     * A reference to the element from which the event was originally dispatched.
     * This might be a child element to the element on which the event listener is registered.
     *
     * @see currentTarget
     */
    target: EventTarget;

    // ...
}

Relaterte artikler