Ошибка "Property 'value' does not exist on type 'EventTarget'" в Angular и TypeScript

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

Ошибка "Property 'value' does not exist on type 'EventTarget'" возникает из-за строгой типизации TypeScript. Свойство EventTarget — это базовый интерфейс для всех объектов, которые могут генерировать события. У него есть только три метода: addEventListener, removeEventListener и dispatchEvent. Свойство value есть только у конкретных HTML-элементов, например, HTMLInputElement или HTMLTextAreaElement. TypeScript не может гарантировать, что event.target — это именно инпут, поэтому и ругается.

Решение: использование HTMLInputElement

Самый правильный способ — явно указать TypeScript, что event.target является HTMLInputElement. Для этого используется приведение типа через as или угловые скобки. Вот как это выглядит:

onInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  console.log(inputElement.value); // Теперь всё работает!
}

Или более краткий вариант:

onInput(event: Event) {
  console.log((event.target as HTMLInputElement).value);
}

Почему это безопасно?

Приведение типа as HTMLInputElement — это не магия, а указание TypeScript довериться разработчику. В рантайме JavaScript это никак не влияет на код. Однако вы должны быть уверены, что событие приходит именно от инпута. В вашем случае это гарантировано шаблоном: (input)="onInput($event)" на <input>.

Альтернативный подход: использование $any() в Angular

В Angular-шаблонах можно использовать функцию $any(), чтобы временно отключить проверку типов. Но это не рекомендуется для серьёзных проектов, так как убирает защиту TypeScript:

<input type="text" (input)="onInput($any($event).target.value)">

Лучшая практика: работа через Event с дженериками

Для более элегантного решения используйте дженерики TypeScript. Можно определить тип события более точно:

onInput(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target) {
    console.log(target.value);
  }
}

Или ещё лучше — использовать интерфейс HTMLInputElement напрямую в параметре события:

onInput(event: Event) {
  const { value } = event.target as HTMLInputElement;
  console.log(value);
}

Полный рабочий пример

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

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

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

Что ещё нужно знать?

• Свойство currentTarget тоже может быть полезно — оно указывает на элемент, к которому привязан обработчик, и не меняется при всплытии события.
• Для <select> используйте HTMLSelectElement, для <textarea> — HTMLTextAreaElement.
• Если вы работаете с React, там похожая проблема решается через ChangeEvent<HTMLInputElement>.

Главное — не бойтесь использовать приведение типов. Это стандартная практика в TypeScript при работе с DOM-событиями. Со временем вы привыкнете и будете делать это автоматически.

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

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

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text" [formControl]="inputControl">
    <p>Вы ввели: {{ inputControl.value }}</p>
  `,
  standalone: true,
  imports: [ReactiveFormsModule]
})
export class MyComponent {
  inputControl = new FormControl('');
}