Якщо ви заціквилися вивченням TypeScript, то ви вже повинні добре знати JS. Якщо знання JS у вас ще невпевненні, то вивчення TS буде помилкою, так як це додаткова прокладка, яка потрібна для типізації коду, що в свою чергу робить роботу простіше в великих командах, та в проектах, де працюють багато людей.
TypeScript це додаткова прокладка, як синтактичний цукор, доповнює мову JS. І хоча деякі сучасні браузери роблять випадки в сторону підтримки нативного TS в браузері, але покищо для виконня TS потрібен компілятор, це може бути нативним runtime ts, або vite webpack/rollup.. По суті, все що робить TS, по більшій мірі, додає статичну типізацію до динамічного JS, але в деяких випадках TS може розширювати JS. Хоча я зараз пишу дуже абстрактно, я хочу донести думку, що TS це не окрема мова програмування, як дехто вважає, а лише прокладка, яка робить для деяких компаній JS більш зручним.
Для того щоб зрозуміти різницю, або що додає TS до JS, треба розуміти як працює типізація в JS - її просто нема. Будь якій змінній ви можете надати будь які данні. Тобто JS в своїй основі динамічний, і частично це його прикраса. Тому що вам не потрібно, постійно описувати моделі данних, зазначати типи данних, і так далі. Будь що ви можете протипувати, або змінити. По факту TS створенний для того, щоб це все у вас забрати з мови, а також додати статичну типізацію. На перший погляд може здатися, що це обуза, але якщо ви працюєте з проектами, де деілька десятків фронтів, та дуже великі модулі, ТС може допомогти розібратися в коді, завдяки моделям данних, та виключає багато помилок, які особливо роблять джуни.
По суті TS додасть вам можливість працювати в великих компаніях, з не кваліфікованими працівниками, і ця робота буде простіше ніж без TS.
Розберомо базовий приклад:
// TS
const greet = (name: string): string => {
return `Hello, ${name}!`;
};
// Compiled JS
const greet = (name) => {
return `Hello, ${name}!`;
};Як ви бачите TS додав додаткову властивість, яка визначає типи данних. По суті це являється основою, на чому будується весь TS.
Введення в TypeScript
Тепер що до конкретики, ми розберемо TypeScript повністю, для того щоб було зручно я розбив все на 21 урок, ось що ви дізнайтеся в кожному з уроків. Перемикатися між уроками можна внизу сторінки.
- Введення в TypeScript (цей урок, опис, жарти, та зміст)
- Встановлення, налаштування, та перший додаток на TypeScript
- Базові типи данних (string, number, boolean, null, undefined, any, void, unknown), а також масиви та кортежі
- Інтерфейси та типи обʼєктів, створення, наслідування, різниця з type
- Функції, їх параметри та типи, повернення данних, значення за замовчуванням
- Розширені типи данних, Union, Intersection, літерали, строгі типи
- Модулі та namespace, створення, імпорт та експорт
- Класси та ООП, абстрактні класи, властивості, методи, наслідування, декторатири
- Обробка помилок та виключення
- Generic, приклади generic на їх обмеження
- Promise в TypeScript, async await та помилки
- Робота з масивами, коллекціями, інтерпритаторами Map, Set, WeakMap, WeakSet. Генератори, та інтерпритатори
- Conditional Types - Partial, Required, Readonly, Pick, Omit
- Утилітарні типи
- Типи для праці з DOM, типізація евентів, браузерне API
- Маппінг типів та створення типів на основі існуючих, глибинна типізація обʼєктів
- Налаштування tsconfig, оптимізація, підключення до front-end так бек проектів
- Інтеграція з вью
- Архітектура та структурування данних в великих проектах
- Плагіни TypeScript
- На завершення деякі поради.