Ось твій урок у стилі David Malan. Уяви, що ти сидиш у лекційній залі, я ходжу сценою, активно жестикулюю і звертаюся особисто до тебе. Поїхали!

🎓 CS50: TypeScript для Angular — Базові типи та синтаксис

Привіт, світе! 👋 Радий бачити вас на цьому занятті.

Сьогодні ми поговоримо про дещо фундаментальне. Про те, що перетворює хаос на порядок. Ми поговоримо про TypeScript.

1. 🔥 Вступ: Проблема та мотивація

Уявіть ситуацію. Ви будуєте будинок. Ви замовляєте вантажівку цегли. Вона приїжджає, ви відкриваєте кузов, а там... подушки. М'які, пухнасті подушки.

Здавалося б, і те, і те — предмети. Але спробуйте збудувати стіну з подушок. Що станеться? Правильно, ваш будинок завалиться ще до того, як ви покладете дах.

У JavaScript, на якому ми всі звикли писати, відбувається те саме. Ви створюєте змінну price (ціна), очікуєте там число, щоб додати податок, а хтось (або ви самі через тиждень) кладе туди текст "безкоштовно". Ви намагаєтесь помножити "безкоштовно" на 20%... і ваш додаток "падає" прямо в руках користувача.

Запитання до вас: Скільки разів ви бачили помилку undefined is not a function або Cannot read property of null?

Це, мабуть, найдорожчі помилки в історії вебу.

Angular обрав TypeScript не просто так. TypeScript — це як суровий виконроб на будівництві. Він перевіряє кожну "цеглину" ще до того, як ви почнете кладку. Він не дозволить вам використати подушку замість цегли.

Без TypeScript писати великі додатки на Angular — це як збирати складний LEGO-набір у темній кімнаті. Можна, але дуже боляче наступати на деталі.

2. 🧠 Теоретична база (Як це працює?)

Отже, що таке TypeScript?

TypeScript — це JavaScript із типами. Це надбудова (superset). Будь-який код на JS є валідним кодом на TS, але не навпаки.

Як це працює "під капотом"?

Уявіть, що TypeScript — це перекладач. Браузер (Chrome, Safari) не розуміє TypeScript. Він розуміє тільки JavaScript. Тому існує процес компіляції (або транспіляції). 1. Ви пишете код на TS (з типами, перевірками). 2. Компілятор перевіряє помилки. Якщо є помилка — він кричить і не дає рухатись далі. 3. Якщо все ок — він "вирізає" всі типи та віддає чистий JavaScript, який вже їде в браузер.

Ключові поняття (Що треба знати зараз):

Явна типізація (Explicit Typing): Ви прямо кажете: "Ця змінна — тільки рядок".
- Синтаксис: let змінна: тип = значення;
- Аналогія: Ви клеїте на коробку стікер "КНИГИ". Якщо спробуєте покласти туди воду, TypeScript вдарить вас по руках.
Виведення типів (Type Inference): Ви не пишете тип, але TypeScript розумний і здогадується сам.
- Якщо ви напишете let age = 25, TypeScript запам'ятає, що age — це число. Ви не зможете потім записати туди текст.
Базові типи:
- string (текст): 'Hello', "Angular"
- number (числа): 42, 3.14
- boolean (так/ні): true, false
- any (УВАГА 🚨): "Що завгодно". Це вимкнення перевірки. Використовуйте тільки в крайніх випадках, інакше навіщо нам TypeScript?

3. 🧪 Приклади (Step by Step)

Рівень 1: Проста змінна

Давайте подивимось на код.

JavaScript (небезпечно):

let title = "Мій Урок";
title = 100; // JS каже: "Ок, без проблем!"
// Пізніше: title.toUpperCase() -> ПОМИЛКА! Числа не мають верхнього регістру.

TypeScript (безпечно):

let title: string = "Мій Урок"; 
// Я задав тип string (рядок)

// А тепер спробую зламати:
title = 100; 
// 🛑 Error: Type 'number' is not assignable to type 'string'.

Бачите? Він навіть не дозволив мені запустити цей код!

Рівень 2: Типовий Angular-компонент

В Angular ми часто працюємо з даними користувача. Уявіть, що ми робимо картку профілю.

// Звичайна змінна класу
class UserProfile {
    username: string = "David";
    age: number = 40;
    isPremium: boolean = true;

    // Масив (список) рядків
    skills: string[] = ["Angular", "TypeScript", "HTML"];
}

Питання до вас: Що станеться, якщо я спробую додати в масив skills число 5? Пауза на подумати... Правильно, буде червона лінія під кодом. Тому що ми сказали: "Це список рядків".

Рівень 3: Функції (Трохи магії)

Функції — це серце логіки. В TypeScript ми типізуємо те, що заходить у функцію (аргументи), і те, що виходить (return type).

// Функція, яка вітає користувача
// name: string -> приймаємо тільки текст
// : string -> функція зобов'язана повернути текст
function getGreeting(name: string): string {
    return "Привіт, " + name + "!";
}

const message = getGreeting("Олексій"); // ✅ Все супер
const error = getGreeting(123);         // 🛑 Помилка: очікувався рядок

А що, якщо функція нічого не повертає? Наприклад, просто виводить лог в консоль? Тоді ми використовуємо тип void (порожнеча).

function logError(errorText: string): void {
    console.log("УВАГА: " + errorText);
    // return тут не потрібен
}

4. 🛠 Практична частина

Тепер ваша черга! Відкрийте редактор коду (або уявіть його).

Завдання 1: Виправте помилку У вас є код, який світиться червоним. Зробіть так, щоб він запрацював, не змінюючи логіку (лише типи).

let score: number = 50;
score = "55"; // 🛑 Помилка тут

Завдання 2: Створіть змінні Опишіть товар в інтернет-магазині, використовуючи правильні типи: * Назва товару (productName) * Ціна (price) * Чи є в наявності (inStock) * Список доступних кольорів (colors)

Завдання 3: Реальна ситуація Напишіть функцію calculateTotal, яка приймає: 1. Ціну (число) 2. Кількість (число) І повертає загальну вартість (число).

Завдання 4: Міні-кейс "А що, якщо..." Спробуйте створити змінну з типом any. let mystery: any = "Hello"; А потім присвойте їй число. А потім булеве значення. Подумайте: чому це зручно в моменті, але жахливо для великого проєкту? (Підказка: згадайте аналогію з подушками замість цегли).

5. 💡 Мислення як у розробника

Як думає Senior Angular Developer?

Типи — це документація. Коли я бачу getUser(id: number): User, мені не треба читати код функції. Я вже знаю, що їй треба дати число, і вона поверне Користувача. Це економить години часу.
IntelliSense — мій найкращий друг. Оскільки VS Code знає типи, він підказує методи. Якщо я напишу myString., редактор покаже toLowerCase(), length і т.д. Без типів він би мовчав.
Уникайте any як вогню. Новачки часто ставлять any, коли ліньки розбиратися з помилкою.
- Помилка: "Ой, TypeScript лається, поставлю any, щоб відстав".
- Профі: "TypeScript лається? Значить, я десь помилився в логіці. Треба виправити саму структуру даних".

Порада: Краще витратити 1 хвилину на написання типу зараз, ніж 3 години на дебаг "чому воно не працює" в п'ятницю ввечері.

6. 🧩 Підсумок

Що ми сьогодні зробили? Ми перестали грати в "російську рулетку" зі змінними.

✅ Ви знаєте, що таке статична типізація.
✅ Ви вмієте оголошувати string, number, boolean, array.
✅ Ви розумієте, чому Angular вимагає TypeScript (безпека і стабільність).

Тепер ви не просто кидаєте дані в код, сподіваючись на краще. Ви будуєте надійний фундамент.

Що далі? Зараз ми працювали з простими типами. Але в реальному житті дані складні. Користувач — це не просто рядок, це об'єкт з ім'ям, поштою, адресою... На наступному уроці ми вивчимо Інтерфейси (Interfaces) — це справжні креслення для ваших даних. Це буде вау!

А поки що — це був TypeScript. Мене звати [Ваше Ім'я], і це... був ваш крок до професійного Angular! 💻🚀