Ошибка TypeScript: Property 'value' does not exist on type 'HTMLElement' при получении значения input

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

TypeScript — строго типизированный язык. Когда вы используете document.getElementById('username'), TypeScript не знает, какой именно HTML-элемент будет возвращён. Он может быть любым: <div>, <span>, <input> и т.д. Поэтому возвращаемый тип — HTMLElement | null.

У HTMLElement нет свойства value. Оно есть только у специфических элементов, таких как HTMLInputElement, HTMLTextAreaElement и некоторых других. TypeScript сообщает вам: "Я не знаю точно, какой это элемент, поэтому не могу гарантировать, что у него есть свойство value".

Решение 1: Явное приведение типа (Type Assertion)

Самый простой способ — сообщить TypeScript, что вы уверены в типе элемента:

const input = document.getElementById('username') as HTMLInputElement;
const button = document.getElementById('btn') as HTMLButtonElement;

button.addEventListener('click', () => {
    const name = input.value; // Теперь ошибки нет
    console.log(name);
});

Обратите внимание: мы используем as HTMLInputElement. Это говорит TypeScript: "Доверься мне, я знаю, что это поле ввода".

Решение 2: Проверка на null и приведение типа

Более безопасный подход — сначала проверить, что элемент существует:

const input = document.getElementById('username');
const button = document.getElementById('btn');

if (input && button) {
    const inputElement = input as HTMLInputElement;
    const buttonElement = button as HTMLButtonElement;
    
    buttonElement.addEventListener('click', () => {
        const name = inputElement.value;
        console.log(name);
    });
}

Решение 3: Использование проверки instanceof

Самый надёжный способ — проверить тип элемента во время выполнения:

const input = document.getElementById('username');
const button = document.getElementById('btn');

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

Преимущество этого подхода в том, что TypeScript автоматически сужает тип внутри блока if.

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

Метод querySelector может принимать типизированный селектор:

const input = document.querySelector<HTMLInputElement>('#username');
const button = document.querySelector<HTMLButtonElement>('#btn');

button?.addEventListener('click', () => {
    if (input) {
        const name = input.value; // input уже имеет тип HTMLInputElement
        console.log(name);
    }
});

Что важно запомнить?

• Всегда проверяйте на null — элементы может не быть в DOM.
• Используйте правильные типы — HTMLInputElement, HTMLButtonElement, HTMLDivElement и т.д.
• Предпочитайте instanceof — это безопаснее, чем просто приведение типа.
• Опциональный оператор ?. — помогает избежать ошибок при обращении к потенциально null-значениям.

В вашем случае, если вы уверены, что элемент с id 'username' — это input, используйте первый вариант с as HTMLInputElement. Для продакшена рекомендую третий вариант с instanceof — он самый безопасный.

function getInputElement(id: string): HTMLInputElement {
    const element = document.getElementById(id);
    if (!element) {
        throw new Error(`Элемент с id "${id}" не найден`);
    }
    if (!(element instanceof HTMLInputElement)) {
        throw new Error(`Элемент с id "${id}" не является input`);
    }
    return element;
}

// Использование
const input = getInputElement('username');
const button = document.getElementById('btn') as HTMLButtonElement;

button?.addEventListener('click', () => {
    console.log(input.value); // Работает без ошибок
});