wake-up-neo.com

Die Eigenschaft 'value' ist für den Typ EventTarget in TypeScript nicht vorhanden

Der folgende Code ist also in Angular 4 und ich kann nicht herausfinden, warum er nicht wie erwartet funktioniert.

Hier ist ein Ausschnitt meines Handlers:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

HTML-Element:

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

Der Code gibt mir den Fehler:

Die Eigenschaft 'value' ist beim Typ 'EventTarget' nicht vorhanden.

Wie im console.log zu sehen ist, existiert dieser Wert jedoch im event.target.

javascriptangulartypescript
33
Ravy

event.target Hierbei handelt es sich um eine HTMLElement, die das übergeordnete Element aller HTML-Elemente ist. Die Eigenschaft value ist jedoch nicht garantiert. TypeScript erkennt dies und gibt den Fehler aus. Konvertieren Sie event.target in das entsprechende HTML-Element, um sicherzustellen, dass es sich um HTMLInputElement handelt, die über eine value-Eigenschaft verfügt:

(<HTMLInputElement>event.target).value

Per die Dokumentation :

Geben Sie den $event ein.

Im obigen Beispiel wird der $event als any-Typ umgewandelt. Das vereinfacht den Code kostengünstig. Es gibt keine Typinformationen, die Eigenschaften des Ereignisobjekts enthüllen und dumme Fehler verhindern könnten.

[...]

Der $event ist jetzt eine bestimmte KeyboardEvent. Nicht alle Elemente haben eine value-Eigenschaft, sodass target in ein Eingabeelement umgewandelt wird.

(Betonung Mine)

45
Li357

Das Übergeben von HTMLInputElement als Generic an den Ereignistyp sollte ebenfalls funktionieren:

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

Hier ist ein weiterer Fix, der für mich funktioniert:

(event.target as HTMLInputElement).value

Damit sollte der Fehler behoben werden, indem TS mitgeteilt wird, dass event.target eine HTMLInputElement ist, die inhärent eine value hat. Vor der Festlegung wusste TS wahrscheinlich nur, dass event allein eine HTMLInputElement war. Laut TS war der eingegebene target ein zufällig zugeordneter Wert, der alles sein konnte.

15
Matt S.

Ich habe nach einer Lösung für einen ähnlichen TypeScript-Fehler gesucht:

Die Eigenschaft 'dataset' ist beim Typ EventTarget in TypeScript nicht vorhanden

Ich wollte in React auf event.target.dataset eines angeklickten Schaltflächenelements zugreifen:

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

So konnte ich den dataset-Wert über TypeScript auf "exist" setzen:

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