Ошибка "Свойство 'value' не существует в типе 'HTMLElement'" в TypeScript

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

Ошибка возникает из-за того, что метод getElementById возвращает тип HTMLElement | null. HTMLElement — это базовый интерфейс для всех HTML-элементов, и у него нет свойства value. Свойство value есть только у определённых типов элементов, таких как HTMLInputElement, HTMLTextAreaElement или HTMLSelectElement. TypeScript не может гарантировать, что элемент с указанным id — это именно <input>, поэтому он выдаёт ошибку.

Решение 1: Использовать утверждение типа (type assertion)

Самый простой способ — явно указать TypeScript, что элемент является HTMLInputElement:

const input = document.getElementById('myInput') as HTMLInputElement;
if (input) {
    console.log(input.value);
}

Обратите внимание: мы используем as HTMLInputElement после получения элемента. Это говорит TypeScript: "Я уверен, что это input, не проверяй". Однако такой подход опасен — если id окажется не input-элементом, ошибка проявится только в рантайме.

Решение 2: Проверка через instanceof (рекомендуется)

Более безопасный способ — проверять тип элемента во время выполнения:

const input = document.getElementById('myInput');
if (input instanceof HTMLInputElement) {
    console.log(input.value);
} else {
    console.error('Элемент не является input');
}

После проверки instanceof TypeScript автоматически сужает тип до HTMLInputElement внутри блока if. Это гарантирует, что value существует, и код безопасен.

Решение 3: Использовать querySelector с правильным типом

Метод querySelector поддерживает более точную типизацию через селекторы:

const input = document.querySelector<HTMLInputElement>('#myInput');
if (input) {
    console.log(input.value);
}

Здесь мы используем generic-тип <HTMLInputElement>, который указывает TypeScript ожидать именно input. querySelector вернёт HTMLInputElement | null.

Решение 4: Обработка null

Не забывайте, что getElementById может вернуть null, если элемент не найден. Всегда проверяйте это:

const input = document.getElementById('myInput');
if (!input) {
    throw new Error('Input не найден');
}
// Если мы уверены в типе, можно использовать утверждение
const typedInput = input as HTMLInputElement;
console.log(typedInput.value);

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

const button = document.getElementById('myButton');
const input = document.getElementById('myInput');

button?.addEventListener('click', () => {
    if (input instanceof HTMLInputElement) {
        const inputValue = input.value;
        console.log(inputValue);
    } else {
        console.error('Элемент не является input');
    }
});

Используйте optional chaining (?.) для безопасного вызова методов, если элемент может быть null.

Итог

• Причина: getElementById возвращает базовый тип HTMLElement, у которого нет value.
• Лучшее решение: проверка instanceof HTMLInputElement — безопасно и понятно.
• Быстрое решение: утверждение типа as HTMLInputElement — но будьте осторожны.
• Продвинутое решение: querySelector<HTMLInputElement> — точная типизация на уровне селектора.

function isInputElement(el: HTMLElement | null): el is HTMLInputElement {
    return el !== null && el.tagName === 'INPUT';
}

const input = document.getElementById('myInput');
if (isInputElement(input)) {
    console.log(input.value); // TypeScript знает, что это HTMLInputElement
}

// Без strictNullChecks — код скомпилируется, но упадёт в рантайме
const input = document.getElementById('myInput');
console.log(input.value); // Ошибка, если input === null

// С strictNullChecks — TypeScript укажет на потенциальную проблему