Свойство "значение" не существует в типе EventTarget в TypeScript

Таким образом, следующий код находится в Angular 4, и я не могу понять, почему он не работает так, как ожидалось.

Вот фрагмент моего обработчика:

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

Элемент HTML:

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

Код дает мне ошибку:

Свойство "значение" не существует в типе "EventTarget".

Но, как видно в console.log это значение существует на event.target.

Ответы

Ответ 1

event.target здесь представляет собой HTMLElement который является родительским элементом всех элементов HTML, но не гарантированно имеет value свойства. TypeScript обнаруживает это и выдает ошибку. HTMLInputElement event.target в соответствующий HTML-элемент, чтобы убедиться, что это HTMLInputElement который имеет свойство value:

(<HTMLInputElement>event.target).value

По документации:

Введите $event

Приведенный выше пример отличает $event как any тип. Это упрощает код за счет стоимости. Нет информации типа, которая могла бы выявить свойства объекта события и предотвратить глупые ошибки.

[...]

$event теперь является специфическим KeyboardEvent. Не все элементы имеют свойство value поэтому он ставит target в элемент ввода.

(Акцент мой)

Ответ 2

Передача HTMLInputElement как общего типа события также должна работать:

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

Ответ 3

Здесь другое исправление, которое работает для меня:

(event.target as HTMLInputElement).value

Это должно избавиться от ошибки, сообщив TS, что event.target является HTMLInputElement, который по своей сути имеет value. Перед задания, TS, вероятно, знал только, что event в одиночку был HTMLInputElement, таким образом, в соответствии с TS ключевидной в target была некоторое случайно сопоставляется значением, которое может быть что угодно.

Ответ 4

Я искал решение для похожей ошибки TypeScript:

Свойство "набор данных" не существует для типа EventTarget в TypeScript

Я хотел добраться до event.target.dataset элемента нажатой кнопки в React:

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

Вот как я смог заставить значение "TG42" "существовать" с помощью 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…
}

Ответ 5

Вы должны использовать опору event.target.value с обработчиком onChange, если не видите:

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'.

Или, если вы хотите использовать другой обработчик, кроме onChange, используйте event.currentTarget.value