Тип объединения машинописного текста в HTMLInputElement

Question

Я пытаюсь сделать следующее

let username: String | HTMLInputElement = document.querySelector('#username')
if (username.reportValidity()) {
  username = username.value
  verify({ username })
}

, но получаю эту ошибку

Property 'value' does not exist on type 'String | HTMLInputElement'.

, но свойство value существует в HTMLInputElement

Какой тип информация, которая мне нужна, чтобы я мог переназначить имя пользователя значению поля

Спасибо

Answer 1

Думаю, я разобрался

Могу

let username: String | HTMLInputElement = document.querySelector('#username')
if (username.reportValidity()) {
  username = (username as HTMLInputElement).value
  verify({ username })
}

Answer 2

Попробуйте использовать защиту типа перед доступом к значению

https://www.typescriptlang.org/docs/handbook/advanced-types.html#instanceof -type-guards

Но переназначение имени пользователя из HTMLInputElement в String не является хорошей практикой. Лучше иметь другую переменную для хранения значения имени пользователя

let username: String | HTMLInputElement = document.querySelector('#username')
if (username.reportValidity() && username instanceof HTMLInputElement) {
  username = username.value
  verify({ username })
}

Надеюсь, это поможет