Właściwość „value” nie istnieje w typie EventTarget w TypeScript

Więc poniższy kod jest w Angular 4 i nie mogę zrozumieć, dlaczego nie działa tak, jak oczekiwano.

Oto fragment mojego programu obsługi:

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)">

Kod daje mi błąd:

Właściwość „wartość” nie istnieje w typie „EventTarget”.

Ale jak widać w console.logtej wartości istnieje na event.target.

event.targettutaj jest, HTMLElementktóry jest rodzicem wszystkich elementów HTML, ale nie ma gwarancji, że będzie miał właściwość value. TypeScript wykrywa to i zgłasza błąd. Odlewanie event.targetdo odpowiedniego elementu HTML, aby zapewnić to HTMLInputElement, które ma valuewłaściwość:

(<HTMLInputElement>event.target).value

Zgodnie z dokumentacją :

Wpisz $event

Powyższy przykład rzuca $eventjako anytyp. To upraszcza kod kosztem. Nie ma informacji o typie, które mogłyby ujawnić właściwości obiektu zdarzenia i zapobiec głupim błędom.

[…]

$eventJest specyficzny KeyboardEvent. Nie wszystkie elementy mają valuewłaściwość, więc jest rzutowana targetna element wejściowy.

(Podkreślenie moje)

Przekazywanie elementu HTMLInputElement jako generycznego do typu zdarzenia również powinno działać:

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

Oto kolejna poprawka, która działa dla mnie:

(event.target as HTMLInputElement).value

Powinno to wyeliminować błąd, informując TS, że event.targetjest to HTMLInputElement, który z natury ma rozszerzenie value. Przed określeniem TS prawdopodobnie wiedział tylko, że eventsam był an HTMLInputElement, więc zgodnie z TS wpisana targetbyła jakaś losowo zmapowana wartość, która może być dowolną wartością.

Szukałem rozwiązania podobnego błędu TypeScript w React:

Właściwość „zestaw danych” nie istnieje w typie EventTarget w języku TypeScript

Chciałem dostać się do event.target.datasetelementu klikniętego przycisku w Reakcie:

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

Oto, w jaki sposób udało mi się uzyskać datasetwartość „istnieje” za pomocą języka 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…
}

Sposób, w jaki to robię, jest następujący (lepszy niż asercja typu imho):

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

Zakłada się, że interesuje Cię tylko targetnieruchomość, co jest najczęstszym przypadkiem. Jeśli chcesz uzyskać dostęp do innych właściwości programu event, bardziej kompleksowe rozwiązanie obejmuje użycie &operatora przecięcia typu:

event: Event & { target: HTMLInputElement }

To jest wersja Vue.js, ale koncepcja dotyczy wszystkich frameworków. Oczywiście możesz pójść bardziej szczegółowo i zamiast używać generała HTMLInputElement, możesz użyć np. HTMLTextAreaElementDla obszarów tekstowych.

Powinieneś użyć event.target.valueprop z obsługą onChange, jeśli nie widzisz:

index.js:1437 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Lub jeśli chcesz użyć innej procedury obsługi niż onChange, użyj event.currentTarget.value