Je veux simplement faire cela avec mon KeyboardEvent

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

Bien que Event.target soit de type EventTarget, il n'hérite pas de Element. Je dois donc le lancer comme ceci:

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

Cela est probablement dû au fait que certains navigateurs ne respectent pas les normes, non? Quelle est la bonne implémentation indépendante du navigateur dans TypeScript?

PS: J'utilise jQuery pour capturer le KeyboardEvent.

Il n'hérite pas de Elementcar toutes les cibles d'événements ne sont pas des éléments.

De MDN :

L'élément, le document et la fenêtre sont les cibles d'événements les plus courantes, mais d'autres objets peuvent également être des cibles d'événements, par exemple XMLHttpRequest, AudioNode, AudioContext et autres.

Même ce KeyboardEventque vous essayez d'utiliser peut se produire sur un élément DOM ou sur l'objet window (et théoriquement sur d'autres choses), donc là, cela n'aurait pas de sens evt.targetd'être défini comme un Element.

S'il s'agit d'un événement sur un élément DOM, je dirais que vous pouvez supposer en toute sécurité evt.target. est un Element. Je ne pense pas que ce soit une question de comportement entre navigateurs. C'est simplement EventTargetune interface plus abstraite que Element.

Lectures complémentaires: https://typescript.codeplex.com/discussions/432211

En utilisant du typographie, j'utilise une interface personnalisée qui ne s'applique qu'à ma fonction. Exemple de cas d'utilisation.

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

Dans ce cas, le handleChange recevra un objet avec un champ cible de type HTMLInputElement.

Plus tard dans mon code, je peux utiliser

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

Une approche plus propre consisterait à placer l'interface dans un fichier séparé.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

puis utilisez plus tard la définition de fonction suivante:

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

Dans mon cas d'utilisation, il est expressément défini que le seul appelant à handleChange est un type d'élément HTML de texte d'entrée.

La réponse de JLRishe est correcte, donc j'utilise simplement ceci dans mon gestionnaire d'événements:

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

Typographie 3.2.4

Pour récupérer la propriété, vous devez convertir la cible en type de données approprié:

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

Pourriez-vous créer votre propre interface générique qui s'étend Event. Quelque chose comme ça?

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

Ensuite, vous pouvez l'utiliser comme:

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

Avec typescript, nous pouvons exploiter les alias de type, comme ceci:

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 fournit la bonne réponse, mais cette syntaxe me semble plus lisible et juste plus agréable:

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