Тайпскрипт правильно ругается потому что таргет события не обязательно должен быть дом элементом. События могут так же порождаться, например XHR запросами.
Я бы на вашем месте сделал так называемую type guard функцию, в которой убеждался бы что таргет действительно элемент дом. Все элементы дом наследуются от объекта HTMLElement. Это можно использовать для проверки:
const isHtmlElement = (v: any): v is HTMLElement => v instanceof HTMLElement;
далее мы можем использовать эту функцию для проверки нашего таргета:
const eventHandler = (e: Event) => {
if (!isHtmlElement(e.target)) {
return;
}
// Вот здесь мы можем смело работать с таргетом как с ДОМ Элементом
e.target.classList.toggle('active');
}
УПД
Еще информация к размышлению.
Финальный код, сгенерированный тайпскриптом, не содержит информации о типах. В рантайме нельзя узнать тип интерфейса, выполнив, например `peremennaya instanceof VashInterfeis`. Но всегда можно создать type guard функию, которая будет определять что объект именно нужного типа по каким-то косвенным признакам (например по наличию определённых полей в объекте). Так как код guard функции невозможно провертить статическим анализватором, тайпскрипт не может гарантировать того что ваша guard фунция верна и не пропускает всё подряд. Поэтому, хорошим тоном является писать такой код, который не нуждается в подобных проверках. Это возможно. Код при таком подходе становится стройнее и легче для осмысления.
