Voglio semplicemente farlo con il mio KeyboardEvent

var tag = evt.target.tagName.toLowerCase();

Sebbene Event.target sia di tipo EventTarget, non eredita da Element. Quindi devo lanciarlo in questo modo:

var tag = (<Element>evt.target).tagName.toLowerCase();

Ciò è probabilmente dovuto ad alcuni browser che non seguono gli standard, giusto? Qual è la corretta implementazione indipendente dal browser in TypeScript?

PS: sto usando jQuery per catturare il KeyboardEvent.

Non eredita da Elementperché non tutti i target di evento sono elementi.

Da MDN :

Elemento, documento e finestra sono i target di evento più comuni, ma anche altri oggetti possono essere target di evento, ad esempio XMLHttpRequest, AudioNode, AudioContext e altri.

Anche quello KeyboardEventche stai cercando di utilizzare può verificarsi su un elemento DOM o sull'oggetto finestra (e teoricamente su altre cose), quindi proprio lì non avrebbe senso evt.targetessere definito come file Element.

Se si tratta di un evento su un elemento DOM, allora direi che puoi tranquillamente presumere evt.target. è un Element. Non credo che sia una questione di comportamento cross-browser. Semplicemente questa EventTargetè un'interfaccia più astratta di Element.

Ulteriori letture: https://typescript.codeplex.com/discussions/432211

Utilizzando il dattiloscritto, utilizzo un'interfaccia personalizzata che si applica solo alla mia funzione. Caso d'uso di esempio.

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

In questo caso, handleChange riceverà un oggetto con un campo di destinazione di tipo HTMLInputElement.

Più avanti nel mio codice posso usare

<input type='text' value={this.state.value} onChange={this.handleChange} />

Un approccio più pulito sarebbe mettere l'interfaccia in un file separato.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

quindi in seguito utilizzare la seguente definizione di funzione:

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

Nel mio caso d'uso, è espressamente definito che l'unico chiamante per handleChange è un tipo di elemento HTML di testo di input.

La risposta di JLRishe è corretta, quindi lo uso semplicemente nel mio gestore di eventi:

if (event.target instanceof Element) { /*...*/ }

Dattiloscritto 3.2.4

Per recuperare la proprietà è necessario eseguire il cast del target sul tipo di dati appropriato:

e => console.log((e.target as Element).id)

Potresti creare la tua interfaccia generica che si estende Event. Qualcosa come questo?

interface DOMEvent<T extends EventTarget> extends Event {
  target: T
}

Quindi puoi usarlo come:

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}

Con il dattiloscritto possiamo sfruttare gli alias di tipo, in questo modo:

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

@Bangonkali fornisce la risposta giusta, ma questa sintassi mi sembra più leggibile e semplicemente più carina:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}