TypeScript валидация: discriminated union и validateEmail

В этом уроке разбираем валидацию форм на TypeScript — создаём собственный validator.ts с нуля, без библиотек. Главная тема — discriminated union type ValidationResult: как TypeScript запрещает вернуть error: string при valid: true, и почему это мощнее обычного boolean. Пишем функцию validateEmail, хелперы ok() и fail() для устранения дублирования, подключаем валидацию в main.ts и убираем type="email" и required из HTML — теперь всё под нашим контролем. В домашнем задании: validatePassword (минимум 6 символов) и validateHabitTitle (не пустое). Разбираем optional chaining (?.) и trim() для защиты от пробелов. 🔗 Полезные ссылки: - TypeScript Handbook — Narrowing (Discriminated Unions): https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions - MDN — String.prototype.split(): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/split - MDN — String.prototype.trim(): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/trim - MDN — Optional chaining (?.): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining - MDN — addEventListener: https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener 🔗 Ссылки: Telegram: https://t.me/daonejuniorday Поддержать на Boosty: https://boosty.to/sovit 📌 Таймкоды: 00:00 — Интро 00:05 — Модуль 4: валидация — создаём src/utils/validator.ts 00:52 — Из чего состоит email: слово + @ + домен + .tld 01:35 — Edge cases: localhost, домены без точки 02:04 — Тип ValidationResult: discriminated union 02:57 — Проблема: valid: true + error: string — TypeScript не ловит 03:22 — Решение: union type {valid: true, error: null} | {valid: false, error: string} 04:50 — TypeScript теперь запрещает ошибку при valid: true 05:38 — validateEmail: стрелочная функция с типом возврата 06:19 — Проверка 1: пустой email — return fail() 07:05 — split('@') — разделяем на левую и правую части 08:01 — Проверка 2: нет левой или правой части после @ 08:42 — split('.') домена — проверка наличия точки 09:30 — Хелперы ok() и fail() — убираем дублирование кода 10:00 — fail(errorMessage) возвращает {valid: false, error} 11:34 — ok() возвращает {valid: true, error: null} 12:12 — Подключаем валидацию в main.ts 13:00 — Убираем type="email" из HTML — своя валидация 14:00 — Убираем required — будем валидировать сами 15:00 — Используем validateEmail перед отправкой формы 16:00 — Показываем ошибку в auth error элементе 17:00 — Тестируем: неправильный email — "Email should be correct" 17:58 — ДЗ: validatePassword (мин. 6 символов), validateHabitTitle (не пустое) 19:05 — Optional chaining (?.) и trim() — защита от пробелов 19:24 — Итог: научились валидировать данные в TypeScript #typescript #validation #discriminatedunion #email #webdev #урок #frontend #javascript