Работа с DOM-элементами и событиями — одна из самых частых задач во фронтенд-разработке. TypeScript предоставляет встроенные типы для браузерных событий, такие как MouseEvent, KeyboardEvent, ChangeEvent и другие.
Однако, стандартный тип Event часто бывает слишком общим. Например, чтобы получить значение из поля ввода (input), нам нужно сообщить TypeScript, что целевой элемент события — это именно HTMLInputElement, иначе мы не сможем обратиться к свойству .value без ошибок.
В этом уроке мы разберем:
- Как правильно типизировать аргумент функции-обработчика.
- Как использовать утверждение типов (
as) для доступа к свойствам элементов. - Различия между `target` и `currentTarget`.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
- Типизация событий DOM.
- Типизация fetch запросов.
- Типизация JSON данных.
- Типизация localStorage.
1. Выбор типа события
В этом задании вам предстоит заполнить пропуски в коде TypeScript, выбирая правильные типы событий DOM из выпадающего списка. Вы увидите два обработчика событий: для клика мыши и для нажатия клавиш. Ваша задача — указать корректные типы (`MouseEvent` или `KeyboardEvent`) для параметров этих функций, чтобы код был типобезопасным и соответствовал стандартам TypeScript. Обратите внимание на свойства, используемые в каждом обработчике, чтобы сделать правильный выбор.
const handleClick = (event: input1S) => {
console.log(`Клик по координатам: ${event.clientX}, ${event.clientY}`);
};
const handleKeyPress = (event: input2S) => {
console.log(`Нажата клавиша: ${event.key}`);
};2. Утверждение типа input
В обработчике события 'change' для HTML-элемента нужно явно привести event.target к типу HTMLInputElement, чтобы безопасно получить доступ к свойству value. Заполните пропуски в коде так, чтобы код корректно типизировал элемент и выводил его значение в консоль.
const inputElement = document.querySelector('#myInput');
inputElement.addEventListener('change', (event: Event) => {
const target = event.target input1S HTMLInputElement;
console.log(target.value);
});3. Доступ к свойствам
В этом TypeScript-коде, предназначенном для работы с DOM элементами на веб-странице, допущена ошибка типизации. Код объявляет переменную с типом HTMLElement, но затем пытается обратиться к свойству .value, которое доступно только для элементов ввода, таких как HTMLInputElement. Это приводит к ошибке компиляции. Найдите строку с неправильным типом и исправьте её, чтобы код мог корректно обращаться к свойству value элемента ввода.
function getInputValue() { const element: HTMLElement = document.getElementById('myInput'); return element.value;}console.log(getInputValue());4. Категории событий
Перед вами список названий событий DOM в TypeScript. Распределите их по двум категориям: события, связанные с действиями мыши, и события, связанные с нажатиями клавиш на клавиатуре. Каждый элемент должен оказаться в одной из двух категорий. Обратите внимание на стандартные названия событий, которые используются при типизации событий в TypeScript.
5. Обработка формы
Проанализируйте TypeScript-код обработчика отправки формы сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа обрабатывает событие отправки формы: от предотвращения стандартного поведения до валидации и условной отправки данных.
// Предположим, что в форме введены следующие данные:
// email: "user@example.com"
// password: "password123"
const form = document.getElementById('myForm') as HTMLFormElement;
form.addEventListener('submit', (event: SubmitEvent) => {
// Шаг 1: Предотвращение стандартной отправки
event.preventDefault();
// Шаг 2: Получение данных формы
const formData = new FormData(form);
const email = formData.get('email') as string;
const password = formData.get('password') as string;
// Шаг 3: Валидация данных
const isEmailValid = email.includes('@');
const isPasswordValid = password.length >= 8;
// Шаг 4: Условная обработка результата валидации
if (isEmailValid && isPasswordValid) {
// Шаг 5: Отправка данных (имитация)
console.log('Данные отправлены:', { email, password });
} else {
console.error('Ошибка валидации: проверьте email и пароль');
}
});6. Сборка Listener
Из предложенных строк соберите корректный TypeScript-код для добавления обработчика событий DOM. Код должен: 1) выбрать элемент с id='myButton' через querySelector, 2) добавить обработчик события 'click' с помощью addEventListener, 3) передать колбэк-функцию, которая выводит сообщение в консоль. В решении должны использоваться только необходимые строки - обратите внимание на лишние строки, которые не относятся к поставленной задаче или содержат синтаксические ошибки.
const button = document.querySelector('#myButton');const button: HTMLButtonElement = document.querySelector('#myButton');button.addEventListener('click', () => {button.addEventListener('click', (event: Event) => { console.log('Button clicked!');});button.addEventListener('onclick', () => {button.click(() => {const button = document.getElement('#myButton');