TypeScript
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Дальше: раздел TypeScript — о разделе · карта тем · справочник 301
TypeScript
TypeScript — JavaScript с статической проверкой типов: tsc ловит несовместимость данных и API до запуска, в runtime остаётся обычный JS. Полный курс — в разделе 5.10; здесь только обзор и ссылки.
Полный учебный маршрут, практикумы и прикладные статьи (React, Node, ORM) — в отдельном разделе энциклопедии:
| Что нужно | Куда |
|---|---|
| С чего начать | TypeScript — о разделе |
| Карта всех статей | Основы и структура языка |
Первая программа, tsc | Первая программа на TypeScript |
| Типы, union, narrowing | Типы данных и типизация в TypeScript |
Таблицы, tsconfig, advanced | Справочник по TypeScript |
| FAQ и чек-лист | TypeScript — итоги · TypeScript — чек-лист |
В курсе JavaScript эта страница — обзор и вход. Учёба, примеры с "Разбор:" и практика — в 5-10-typescript/*.md. Не дублируйте здесь справочник: таблицы синтаксиса живут в 301.
Зачем TypeScript вместе с JavaScript
- Ошибки типов — на этапе редактора и
tsc, а не только в runtime. - Рефакторинг — переименование и смена контракта API с подсветкой всех мест.
- Документация в коде — IDE подсказывает поля, параметры, возврат функций.
- Масштаб — frontend, backend, mobile и desktop на одном языке семейства JS.
Сначала закрепите базу JavaScript, затем переходите в раздел TypeScript.
JavaScript и TypeScript: один пример
JavaScript — типы привязаны к значению в runtime; ошибка несовместимости может всплыть при выполнении:
function greet(person) {
return "Привет, " + person.name;
}
let user = { name: "Алексей", age: 30 };
greet(user);
user = 42;
// greet(user); // Runtime: Cannot read properties of number
TypeScript — контракт проверяется при компиляции:
interface Person {
name: string;
}
function greet(person: Person): string {
return `Привет, ${person.name}`;
}
const user: Person = { name: "Алексей" };
greet(user);
// const broken: Person = 42; // Ошибка компиляции
Разбор подробнее — типы в TypeScript. Полное сравнение JS и TS — Сравнение JavaScript и TypeScript. Динамическая модель — типы в JavaScript.
TypeScript и React (кратко)
В React TypeScript описывает props, state и ответы API. Шаблон: npm create vite@latest my-app -- --template react-ts.
| Тема | Статья |
|---|---|
| Props, hooks, LoadState | TypeScript и React |
| Курс React в JS | React - библиотека для пользовательских интерфейсов |
| Справочник React | 271 |
Связь с другими материалами JS-курса
| Тема в JS | TypeScript |
|---|---|
| Асинхронность | Асинхронное программирование в TypeScript |
| Node.js | TypeScript и Node.js |
| Next.js | TypeScript и React, Форматы и подключение TypeScript |
Углублённые темы (якоря → учебный раздел)
Ниже — короткие указатели. Полные статьи с примерами и практикой — в 5.10 TypeScript.
Компилятор TypeScript
tsc проверяет типы и генерирует .js, .d.ts, source maps. Настройки — tsconfig.json.
→ Архитектура компиляции · Подключение · 301 §11
Архитектура компиляции
Цепочка: парсинг → AST → проверка типов → emit. Типы в .js не попадают.
→ Архитектура компиляции TypeScript и runtime
Ускорение компилятора
В экосистеме развивается нативная реализация (ускорение на больших репозиториях). Следите за release notes и настройками CI.
→ Архитектура компиляции TypeScript и runtime · Экосистема и архитектура TypeScript
TypeScript Server (tsserver)
Фоновый процесс для IDE — диагностика, автодополнение, rename, go to definition.
Дженерики (Generics)
Array<T>, Promise<T>, функции function id<T>(x: T): T — параметризация типов.
→ Дженерики в TypeScript · 301 §8
Разработка на основе типов
Контракты API и domain до реализации; keyof, mapped types, utility types.
→ Типы данных и типизация в TypeScript · Функции в TypeScript
Асинхронность с типами
Promise<T>, async/await, union состояний загрузки, unknown в catch.
→ Асинхронное программирование в TypeScript · теория JS — Асинхронное программирование в JavaScript
Обработка ошибок
Result / throw, unknown в catch, доменные коды ошибок.
→ Обработка исключений в JavaScript (JS) · Обработка ошибок в TypeScript (TS)
Паттерны
Discriminated union, factory, DTO, branded types.
Поэтапная миграция с JavaScript
allowJs, JSDoc, переименование .js → .ts, @types/*, strict.
→ Рекомендации по разработке на TypeScript · Первая программа на TypeScript
Monorepo и публикация на npm
Project references, tsc -b, declaration, пакет с .d.ts.
→ Экосистема и архитектура TypeScript · 301 §11
Мини-практикум (старт)
- Откройте первая программа TS и соберите
dist/. - Пройдите типы и включите
strict. - Сделайте один мини-проект из простых приложений.
- Закройте слабые пункты в чек-листе.