Ich möchte dies einfach mit meinem KeyboardEvent tun

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

Während Event.target vom Typ EventTarget ist, erbt es nicht von Element. Also muss ich es so besetzen:

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

Dies liegt wahrscheinlich daran, dass einige Browser nicht den Standards entsprechen, oder? Was ist die richtige browserunabhängige Implementierung in TypeScript?

PS: Ich verwende jQuery, um das KeyboardEvent zu erfassen.

Es wird nicht geerbt, Elementda nicht alle Ereignisziele Elemente sind.

Von MDN :

Element, Dokument und Fenster sind die häufigsten Ereignisziele, aber auch andere Objekte können Ereignisziele sein, z. B. XMLHttpRequest, AudioNode, AudioContext und andere.

Sogar das, was KeyboardEventSie verwenden möchten, kann auf einem DOM-Element oder auf dem Fensterobjekt (und theoretisch auf anderen Dingen) auftreten, sodass es genau dort keinen Sinn macht evt.target, als definiert zu werden Element.

Wenn es sich um ein Ereignis in einem DOM-Element handelt, kann ich davon ausgehen, dass Sie davon ausgehen können evt.target. ist ein Element. Ich denke nicht, dass dies eine Frage des browserübergreifenden Verhaltens ist. Nur das EventTargetist eine abstraktere Schnittstelle als Element.

Weiterführende Literatur: https://typescript.codeplex.com/discussions/432211

Mit Typoskript verwende ich eine benutzerdefinierte Schnittstelle, die nur für meine Funktion gilt. Beispiel Anwendungsfall.

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

In diesem Fall erhält handleChange ein Objekt mit einem Zielfeld vom Typ HTMLInputElement.

Später in meinem Code kann ich verwenden

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

Ein sauberer Ansatz wäre, die Schnittstelle in eine separate Datei zu stellen.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

Verwenden Sie später die folgende Funktionsdefinition:

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

In meinem Anwendungsfall wird ausdrücklich definiert, dass der einzige Aufrufer von handleChange ein HTML-Elementtyp des Eingabetextes ist.

Die Antwort von JLRishe ist richtig, daher verwende ich diese einfach in meinem Event-Handler:

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

Typoskript 3.2.4

Zum Abrufen von Eigenschaften müssen Sie das Ziel in den entsprechenden Datentyp umwandeln:

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

Könnten Sie Ihre eigene generische Schnittstelle erstellen, die sich erweitert Event? Etwas wie das?

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

Dann können Sie es wie folgt verwenden:

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

Mit Typoskript können wir Typ-Aliase wie folgt nutzen:

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 liefern die richtige Antwort, aber diese Syntax scheint mir lesbarer und nur schöner zu sein:

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