web-dev-qa-db-fra.com

La propriété 'valeur' ​​n'existe pas sur le type EventTarget dans TypeScript

Le code suivant est donc dans 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; //this wont work
}

Élément HTML:

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

Le code me donne l'erreur:

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

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

javascriptangulartypescript
33
Ravy

event.target Voici une HTMLElement qui est le parent de tous les éléments HTML, mais la propriété value n'est pas garantie. TypeScript le détecte et renvoie l'erreur. Convertissez event.target en élément HTML approprié pour vous assurer qu'il s'agit bien de HTMLInputElement qui possède une propriété value:

(<HTMLInputElement>event.target).value

Pour la documentation :

Tapez le $event

L'exemple ci-dessus attribue $event à un type any. Cela simplifie le code à un coût. Aucune information de type susceptible de révéler les propriétés de l'objet événement et d'éviter des erreurs stupides.

[...]

Le $event est maintenant une KeyboardEvent spécifique. Tous les éléments ne possèdent pas une propriété value, de sorte qu'il transforme target en un élément d'entrée.

(C'est moi qui souligne)

45
Li357

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

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}
24
Mikael Lirbank

Voici un autre correctif qui fonctionne pour moi:

(event.target as HTMLInputElement).value

Cela devrait éliminer l’erreur en indiquant à TS que event.target est une HTMLInputElement, qui a intrinsèquement une value. Avant de spécifier, TS ne savait probablement que que event était à elle seule une HTMLInputElement; ainsi, selon TS, la valeur saisie target était une valeur mappée de manière aléatoire qui pouvait être n'importe quoi.

15
Matt S.

Je cherchais une solution à une erreur TypeScript similaire:

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

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

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

Voici comment j'ai pu obtenir la valeur dataset "exister" via TypeScript:

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}
0
Beau Smith