Властивість 'value' не існує для типу EventTarget у TypeScript

Отже, наступний код знаходиться у куті 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є an HTMLInputElement, що по суті має a value. Перш ніж вказувати, TS, ймовірно, лише знав, що eventпоодинці це було HTMLInputElement, тому, згідно з TS, введене в дію targetбуло деяким випадковим чином відображеним значенням, яке може бути чим завгодно.

Я шукав рішення для подібної помилки TypeScript з React:

Властивість "набір даних" не існує для типу 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