La propriété 'value' n'existe pas sur le type EventTarget en TypeScript

Question

Donc le code suivant est en Angular 4 et je ne comprends pas pourquoi il ne fonctionne pas comme prévu.

Voici un extrait de mon gestionnaire:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //ce ne fonctionnera pas
}

Élément HTML:

Le code me donne l'erreur:

La propriété 'value' n'existe pas sur le type 'EventTarget'.

Mais comme on peut le voir dans le console.log, la valeur existe sur event.target.

Answer 1

event.target ici est un HTMLElement qui est le parent de tous les éléments HTML, mais dont la propriété value n'est pas garantie. TypeScript détecte cela et génère une erreur. Effectuez une conversion de event.target à l'élément HTML approprié pour vous assurer qu'il s'agit bien d'un HTMLInputElement qui possède une propriété value:

(event.target).value

Conformément à la documentation:

Type the $event

L'exemple ci-dessus convertit le $event en un type any. Cela simplifie le code mais avec un coût. Il n'y a pas d'informations de type qui pourraient révéler les propriétés de l'objet événement et éviter des erreurs stupides.

[...]

Le $event est désormais un KeyboardEvent spécifique. Tous les éléments n'ont pas une propriété valuetarget en un élément input.

(Ma mise en emphase)

Answer 2

Passer HTMLInputElement en tant que générique au type d'événement devrait également fonctionner :

onUpdatingServerName(event: React.ChangeEvent) {
  console.log(event);
  this.newserverName = event.target.value;
}

Answer 3

Voici une autre solution qui fonctionne pour moi :

(event.target as HTMLInputElement).value

Cela devrait éliminer l'erreur en permettant à TS de savoir que event.target est un HTMLInputElement, qui a intrinsèquement une valeur. Avant de spécifier, TS savait probablement seulement que event seul était un HTMLInputElement, donc selon TS la cible entrée était une valeur cartographiée au hasard qui pouvait être n'importe quoi.

Answer 4

J'étais à la recherche d'une solution à une erreur similaire de TypeScript avec React :

La propriété 'dataset' n'existe pas sur le type EventTarget en TypeScript

Je voulais accéder à event.target.dataset d'un élément de bouton cliqué dans React :

  Supprimer le candidat

Voici comment j'ai pu faire en sorte que la valeur de dataset "existe" via TypeScript :

const onClickHandler = (event: React.MouseEvent) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // faire des choses avec name et index…
}

Answer 5

La façon dont je le fais est la suivante (meilleure que l'assertion de type à mon avis):

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

Cela suppose que vous êtes seulement intéressé par la propriété target, ce qui est le cas le plus courant. Si vous avez besoin d'accéder aux autres propriétés de event, une solution plus complète consiste à utiliser l'opérateur d'intersection de types &:

event: Event & { target: HTMLInputElement }

Il s'agit d'une version de Vue.js mais le concept s'applique à tous les frameworks. Bien sûr, vous pouvez être plus spécifique et au lieu d'utiliser un HTMLInputElement général, vous pouvez utiliser par exemple HTMLTextAreaElement pour les zones de texte.