Union, narrowing і type guards — JavaScript

Результат уроку

У цьому уроці ти не просто прочитаєш про «Union, narrowing і type guards», а побудуєш робочий приклад, розбереш кожний крок, виконаєш три вправи та закріпиш тему в тренажері.

Пояснення

Як працює тема на практиці

Union, narrowing і type guards — практична тема, без якої складно писати передбачувані програми на JavaScript. Безпечно працювати з кількома варіантами типу.

Починай із контракту: які дані надходять, який результат очікується і що вважається помилкою. Це одразу підказує структуру рішення та набір перевірок.

Після робочого сценарію обов’язково перевір порожнє значення, мінімальну й максимальну межу, неправильний тип або відсутній ресурс. Саме крайові випадки найчастіше відрізняють навчальний код від production-коду.

Завершуй рефакторингом: прибери дублювання, скороти вкладеність, уточни назви й залиш лише ті абстракції, які спрощують читання та тестування.

01

Пояснити власними словами, яку проблему розв’язує тема «Union, narrowing і type guards».

02

Розділити вхідні дані, бізнес-правила та формування результату.

03

Перевірити типовий, граничний і помилковий сценарії.

04

Оцінити читабельність: назви, вкладеність, дублювання та залежності.

Робочий приклад

JavaScript · lesson 33

interface Course { id: number; title: string; progress: number }

function findById<T extends { id: number }>(items: T[], id: number): T | undefined {
  return items.find(item => item.id === id);
}

const course = findById<Course>([{ id: 1, title: 'TS', progress: 20 }], 1);

1

Визначаємо формат вхідних даних і очікуваний результат.

2

Розбираємо ключову конструкцію прикладу та причину її вибору.

3

Запускаємо типовий сценарій і перевіряємо фактичний результат.

4

Додаємо крайовий випадок, після чого спрощуємо код без зміни поведінки.

Закріплення

Три вправи від простого до challenge

01

Розігрів

Зміни приклад уроку так, щоб він працював з двома різними наборами даних і виводив зрозуміле повідомлення.

02

Основна практика

Створи невелику програму на тему «Union, narrowing і type guards»: використай реалістичні дані навчальної платформи, покажи результат і оброби щонайменше один крайовий випадок.

03

Challenge

Додай перевірку помилкових даних, винеси логіку в окрему функцію/метод і підготуй щонайменше три тестові сценарії для теми «Union, narrowing і type guards».

Виконати основну вправу в тренажері

Практична задача

Створи невелику програму на тему «Union, narrowing і type guards»: використай реалістичні дані навчальної платформи, покажи результат і оброби щонайменше один крайовий випадок.

Рішення виконує поставлену умову, використовує ключові конструкції теми «Union, narrowing і type guards», має зрозумілі назви та не падає на порожніх або некоректних даних.

Відкрити редактор

ПідказкиЗапиши приклад input → output до написання коду.Спочатку реалізуй найменший робочий варіант, потім додай перевірки.Не дублюй одну й ту саму умову в кількох місцях.

Контроль засвоєння

Перевір себе перед завершенням уроку

Дай відповідь на всі 4 питання. Для зарахування потрібно набрати щонайменше 75%.

0/4відповідей

01

Який підхід найкраще закріплює тему «Union, narrowing і type guards»?

02

Який результат найточніше відповідає меті цього уроку?

03

Яка дія найкраще закріпить матеріал після теорії та прикладу?

04