Свойство «значение» не существует для типа «EventTarget» в vue3 (ts)

Новый, записывающий подводные камни, с которыми я столкнулся при изучении ТС, и помогающий укрепить память.

1. Вопросы:

Инкапсулируйте пользовательский компонент ввода, и при получении e.target.value возникает следующая ошибка. Свойство «значение» не существует для типа «EventTarget».

const inputFn = (e: Event) => {
    const val = e.target.value
    emit("update:modelValue", val)
}

 

2. Причины:

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

3. Решение:

const inputFn = (e: Event) => {
    const val = (<HTMLInputElement>e.target).value
    emit("update:modelValue", val)
}

или

const inputFn = (e: Event) => {
    const val = (e.target as HTMLInputElement).value
    emit("update:modelValue", val)
}