Свойство value не существует для типа 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)">

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

Свойство value не существует для типа EventTarget.

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

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

(<HTMLInputElement>event.target).value

Согласно документации :

Введите $event

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

[...]

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

(Акцент мой)

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

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

Вот еще одно исправление, которое мне подходит:

(event.target as HTMLInputElement).value

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

Я искал решение аналогичной ошибки TypeScript с React:

Свойство dataset не существует для типа EventTarget в TypeScript.

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

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

Вот как я смог заставить datasetзначение «существовать» через 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…
}

Я делаю это следующим образом (лучше, чем утверждение типа imho):

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

Это предполагает, что вас интересует только targetсобственность, что является наиболее распространенным случаем. Если вам нужно получить доступ к другим свойствам event, более комплексное решение включает использование &оператора пересечения типов:

event: Event & { target: HTMLInputElement }

Это версия Vue.js, но концепция применима ко всем фреймворкам. Очевидно, вы можете пойти более конкретным образом и вместо общего HTMLInputElementиспользования, например, HTMLTextAreaElementдля текстовых полей.

Вы должны использовать 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

добавить к событию любой тип

event: any

пример

addEvenListener('mousemove', (event: any) =>{
//CODE//
} )