javascript - Proprietatea 'value' nu există pe tipul EventTarget în TypeScript

Deci codul următor este în Angular 4 și nu pot să înțeleg de ce nu funcționează așa cum mă așteptam.

Iată un fragment din handler-ul meu:

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

Element HTML:

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

Codul îmi dă eroarea:

Proprietatea 'value' nu există pe tipul 'EventTarget'.

Dar, după cum se poate vedea în console.log, acea valoare există pe event.target.

Răspuns #1

event.target aici este un HTMLElement care este părintele tuturor elementelor HTML, dar nu este garantat că are proprietatea value. TypeScript detectează acest lucru și generează eroarea. Convertește event.target către elementul HTML corespunzător pentru a te asigura că este HTMLInputElement, care are proprietatea value:

(event.target as HTMLInputElement).value

Conform documentației:

Tastați $event

Exemplul de mai sus convertește $event ca un tip any. Aceasta simplifică codul cu un cost. Nu există informații despre tip care să dezvăluie proprietățile obiectului eveniment și să prevină greșelile ridicole.

[...]

$event este acum un KeyboardEvent specific. Nu toate elementele au o proprietate value, așa că se convertește target într-un element de tip input.

(Subliniază al meu)

Răspunsul #2

Transmiterea HTMLInputElement ca generic pentru tipul de eveniment ar trebui să funcționeze și:

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

Răspunsul #3

Iată o altă soluție care funcționează pentru mine:

(event.target as HTMLInputElement).value

Asta ar trebui să elimine eroarea prin faptul că TS știe că event.target este un HTMLInputElement, care are în mod inerent un value. Înainte de specificare, TS probabil știa doar că event singur era un HTMLInputElement, astfel că, conform TS, target introdus putea fi orice valoare aleatorie.

Răspunsul #4

Căutam o soluție pentru o eroare similară de TypeScript cu React:

Proprietatea 'dataset' nu există pe tipul EventTarget în TypeScript

Am vrut să ajung la event.target.dataset al unui element de tip buton pe care l-am făcut clic în React:

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

Iată cum am reușit să fac valoarea dataset să „existe” prin 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…
}

Răspunsul #5

În șablon -

`(keyup)="value2=$any($event.target).value"`

în componentă -

getInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

Răspunsul #6

Modul în care o fac este următorul (mai bun decât afirmația de tip, după părerea mea):

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

Aceasta presupune că sunteți interesat doar de proprietatea target, ceea ce este cel mai frecvent caz. Dacă trebuie să accesați celelalte proprietăți ale event, o soluție mai cuprinzătoare implică utilizarea operatorului de intersecție de tip &:

event: Event & { target: HTMLInputElement }

Aceasta este o versiune Vue.js, dar conceptul se aplică tuturor framework-urilor. Evident, poți fi mai specific și, în loc să folosești un HTMLInputElement general, poți folosi, de exemplu, HTMLTextAreaElement pentru câmpurile de tip textarea.

Răspuns #7

Funcționează pentru mine în componenta HTML ANGULAR !!

$any($event.target).value

Link sursă: https://www.tektutorialshub.com/angular/property-value-does-not-exist-on-type-eventtarget-error-in-angular/

Răspuns #8

Pentru a rezolva această problemă, folosiți funcția de tip $any ($any($event.target).value) pentru a opri verificarea tipului în șablon.

Citește mai mult aici.