Основы TypeScript и структура языка
Дальше: О разделе · Первая программа · Типы и типизация · Обзор TypeScript в JS
Play ITЗагрузка интерактивного демо…
Основы TypeScript
Что такое TypeScript?
TypeScript — язык программирования со следующими особенностями:
- Типизация — статическая и структурная проверка на этапе компиляции. Компилятор выводит типы там, где вы их не пишете (
const, generics). В runtime типы стираются — выполняется обычный JavaScript. Подробнее — Типы и типизация. - Парадигма — мультипарадигменный язык. Классы и интерфейсы (ООП), функции высшего порядка и generics (функциональный стиль), императивный код. Надмножество JavaScript.
- Уровень — высокоуровневый. Надстройка над JS с системой типов.
- Выполнение — транспилируемый. Исходники
.tsпроверяетtsc,esbuildилиswcи превращает в JavaScript. Runtime — движки V8, SpiderMonkey и др. - Память — как у JavaScript, автоматическая (сборщик мусора). См. сборка мусора.
- Платформа — кроссплатформенный. Транспиляция в ES3–ESNext; запуск в браузере, Node.js, Deno, Bun.
- Формат разработки — нужны
tsconfig.jsonи шаг сборки или watch. Файлы.tsбраузер напрямую не исполняет (исключения — Deno и dev-серверы с on-the-fly трансформацией). - Направление — фронтенд (React, Angular, Vue), fullstack и бэкенд (Node.js), desktop (Electron), мобильные приложения на базе JS.
- REPL — TypeScript Playground,
tsx/ts-node, интерактивный режим Deno. - Поколение — с 2012 года (Microsoft), активные релизы каждые несколько месяцев. История — История TypeScript.
- Параллелизм — как у JavaScript. Однопоточный event loop,
Promiseиasync/await. Параллелизм через Web Workers иworker_threads. - Безопасность — проверка типов до запуска снижает класс ошибок по сравнению с чистым JS. В runtime те же риски; гарантии ослабляют
any, type assertion (as) и@ts-ignore.
Если какой-то пункт из списка непонятен — подробные определения и примеры в Язык программирования.
Карта учебного раздела
Здесь собрана карта раздела: куда идти дальше и в каком порядке. У каждой темы своя статья с примерами, пояснениями после кода и блоком практики. Таблицы синтаксиса и tsconfig собраны в Справочник по TypeScript; короткий вход из курса JavaScript — в Обзор TypeScript в JS.
Старт: О разделе → Первая программа → Типы и типизация.
Соответствие учебным темам
Соответствие справочнику 301 (18 блоков)
Полная таблица "тема → учебная статья → §301" — в индексе справочника. Кратко:
| Блок 301 | Учебные статьи |
|---|---|
| 1–3 Основы, составные, union/intersection | Типы данных и типизация в TypeScript, Переменные и константы в TypeScript, Операторы и условные ветвления в TypeScript, Коллекции и массивы в TypeScript |
| 4–6 Функции, интерфейсы, классы | Функции в TypeScript, Синтаксис и пунктуация TypeScript, Объекты и классы в TypeScript |
| 7–8 Utility и advanced | Типы данных и типизация в TypeScript, Дженерики в TypeScript |
| 9–11 Модули, декларации, tsconfig | Форматы и подключение TypeScript, Архитектура компиляции TypeScript и runtime, Первая программа на TypeScript |
| 12 Декораторы | Декораторы в TypeScript |
| 13–14 DOM, фреймворки | События и обработка событий в TypeScript, TypeScript и React, TypeScript и Node.js |
| 15–16 Паттерны, практики | Паттерны в TypeScript, Рекомендации по разработке на TypeScript, Обработка ошибок в TypeScript |
| 17–18 Инструменты, расширение TS | Экосистема и архитектура TypeScript, Первая программа на TypeScript, Архитектура компиляции TypeScript и runtime, TypeScript Server |
Рекомендуемые маршруты
| Цель | Порядок статей |
|---|---|
| Новичок | intro → 29 → 4 → 10 → 11 → 12 → 14 → 17 → 5 |
| Frontend | 4 → 10 → 14 → 17 → 20 → 21 → 6 |
| Backend | 4 → 9 → 10 → 17 → 22 → 27 → 26 (опц.) |
| Инженерия | 3 → 6 → 9 → 15 → 16 → 28 → 24 |
Блок A — старт и экосистема
| № | Статья | Тема |
|---|---|---|
| 1 | Основы языка | карта раздела |
| 2 | Экосистема | monorepo, CI, @types |
| 3 | Первая программа | tsc, dist/ |
| 4 | Простые приложения | практикум |
| 5 | Рекомендации | strict, Zod, миграция |
| 6 | История | контекст языка |
| 6a | Сравнение JS и TS | выбор технологии, плюсы и минусы |
| 7 | Синтаксис | interface и type |
Блок B — синтаксис и типы
| № | Статья | Тема |
|---|---|---|
| 8 | Подключение | tsconfig, ESM/CJS |
| 9 | Типы | union, narrowing, utility |
| 10 | Переменные | const, readonly |
| 11 | Ветвления | discriminated union |
| 12 | Циклы | for...of, кратко |
| 13 | Функции | overloads, this |
| 14 | Компиляция | tsc, source maps |
| 15 | TypeScript Server | IDE, LSP |
Блок C — ООП, async, события
| № | Статья | Тема |
|---|---|---|
| 16 | Асинхронность | Promise<T>, LoadState |
| 17 | Классы | structural typing |
| 18 | Коллекции | tuple, Map, Record |
| 19 | События | DOM, CustomEvent |
| 20 | Индекс справочника | маршрут к Справочник по TypeScript |
Блок D — стек и продвинутое
| № | Статья | Тема |
|---|---|---|
| 21 | TypeScript и React | props, hooks |
| 22 | Node.js | DTO, API |
| 23 | Декораторы | Nest, TypeORM |
| 24 | Дженерики | <T>, constraints |
| 25 | Генераторы | Generator, async iter |
| 26 | TypeORM | entity, repo |
| 27 | Ошибки | Result, unknown |
| 28 | Паттерны | union-команды, factory |
Как устроен раздел
| Слой | Где | Назначение |
|---|---|---|
| Учебные статьи | 5-10-typescript/*.md | объяснение, примеры, практика |
| Обзор в курсе JS | TypeScript | вход из JavaScript |
| Справочник-шпаргалка | Справочник по TypeScript | таблицы, advanced |
| Индекс | Справочник по TypeScript | навигация к 301, не дублирует его |
Завершение раздела
| Материал | Назначение |
|---|---|
| TypeScript — итоги — итоги | FAQ, типичные ошибки |
| TypeScript — чек-лист — чек-лист | самопроверка перед практикой |
Важно про практику
TypeScript особенно полезен в командах и долгоживущих проектах: типы задают контракт между модулями. Включайте strict с первого дня — рекомендации. Мини-проекты — Простые приложения на TypeScript.