Ошибка Property 'value' does not exist on type EventTarget в TypeScript: как исправить

Почему возникает ошибка?

Проблема в том, что TypeScript — статически типизированный язык. Когда вы пишете event: Event, TypeScript знает только то, что event.target имеет тип EventTarget. У интерфейса EventTarget действительно нет свойства value — это базовый интерфейс для всех элементов DOM, который предоставляет методы addEventListener и removeEventListener. Свойство value есть только у определённых HTML-элементов (например, HTMLInputElement, HTMLTextAreaElement, HTMLSelectElement).

Правильное решение: приведение типа

Самый простой и правильный способ — явно указать TypeScript, что event.target является HTMLInputElement. Это делается с помощью оператора as (type assertion):

onInput(event: Event): void {
  const target = event.target as HTMLInputElement;
  this.inputValue = target.value;
}

Теперь TypeScript знает, что target — это HTMLInputElement, у которого есть свойство value (типа string). Это полностью типобезопасно, потому что в рантайме event.target действительно будет HTMLInputElement, если событие произошло на элементе <input>.

Более точный подход: использование дженериков

Вы можете пойти дальше и использовать дженерики в самом типе события. Вместо Event используйте Event с указанием конкретного типа элемента:

onInput(event: Event & { target: HTMLInputElement }): void {
  this.inputValue = event.target.value;
}

Или ещё более элегантный способ — использовать тип InputEvent (который наследуется от Event):

onInput(event: InputEvent): void {
  const target = event.target as HTMLInputElement;
  this.inputValue = target.value;
}

Альтернатива: использование Angular Forms

В Angular есть более удобный способ работы с формами — реактивные формы или шаблонные формы. Например, с помощью ngModel:

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text" [(ngModel)]="inputValue" />
    <p>Вы ввели: {{ inputValue }}</p>
  `
})
export class MyComponent {
  inputValue: string = '';
}

В этом случае вам вообще не нужно обрабатывать события вручную — Angular сам синхронизирует значение.

Важные замечания

• Проверка типа в рантайме (необязательно): Если вы хотите быть максимально безопасным, можно добавить проверку instanceof:

onInput(event: Event): void {
  if (event.target instanceof HTMLInputElement) {
    this.inputValue = event.target.value;
  }
}

• Для других элементов: Если вы работаете с <textarea> — используйте HTMLTextAreaElement, для <select> — HTMLSelectElement.
• Не используйте any: Приведение к any убивает всю пользу от TypeScript, поэтому избегайте (event.target as any).value.

Итог: используйте event.target as HTMLInputElement — это самый распространённый и правильный паттерн в TypeScript для работы с событиями DOM.

function getInputValue(event: Event): string {
  const target = event.target as HTMLInputElement;
  return target.value;
}

// Использование:
onInput(event: Event): void {
  this.inputValue = getInputValue(event);
}

function getTargetValue<T extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(event: Event): string {
  return (event.target as T).value;
}

onInput(event: Event): void {
  this.inputValue = getTargetValue<HTMLInputElement>(event);
}

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <input #myInput type="text" (input)="onInput()" />
    <p>Вы ввели: {{ inputValue }}</p>
  `
})
export class MyComponent {
  @ViewChild('myInput') inputElement!: ElementRef<HTMLInputElement>;
  inputValue: string = '';

  onInput(): void {
    this.inputValue = this.inputElement.nativeElement.value;
  }
}