Что такое TypeScript

TypeScript (TS) — это надмножество JavaScript: любой рабочий JS-код является корректным TS-кодом. TypeScript добавляет к языку статическую типизацию — компилятор проверяет типы ещё до запуска программы и помогает находить ошибки на этапе написания кода. Разработан компанией Microsoft, открытый исходный код, первый публичный релиз — 2012 год.

Главная идея: типы существуют только на этапе компиляции. После сборки получается обычный JavaScript, который выполняется в браузере или в Node.js. Никакого «рантайма типов» в production не остаётся.

Динамическая vs статическая типизация

В JavaScript типы проверяются во время выполнения (динамически). Ошибка обнаруживается уже после запуска:

// JavaScript
function getUser(id) {
    return fetch("/api/users/" + id).then((r) => r.json());
}

// Опечатка имени метода — всплывёт только в продакшене
getUser(42).then((user) => {
    console.log(user.naem); // undefined, но ошибки нет
});

TypeScript подсветит такие проблемы ещё в редакторе:

// TypeScript
interface User {
    id: number;
    name: string;
}

function getUser(id: number): Promise<User> {
    return fetch("/api/users/" + id).then((r) => r.json());
}

getUser(42).then((user) => {
    console.log(user.naem);
    //          ^^^^^^^^^^
    // Ошибка: свойства "naem" не существует. Вы имели в виду "name"?
});

Зачем нужен TypeScript

• Раннее обнаружение ошибок — опечатки, обращения к undefined, неверные аргументы функций ловятся в редакторе, а не у пользователя.
• Удобные подсказки и автодополнение — редактор знает форму данных и подсказывает имена свойств.
• Код как документация — типы параметров и возвращаемых значений объясняют, как использовать функцию, без отдельного README.
• Безопасный рефакторинг — при переименовании поля компилятор покажет все места, которые нужно поправить.
• Командная работа — типы фиксируют «контракты» между модулями; коллеги не случайно сломают API.

Кто использует TypeScript

На TypeScript написаны или активно используют: Angular (полностью), React-проекты (через шаблон --template typescript), Vue 3, NestJS (backend-фреймворк), VS Code, Microsoft Teams, Slack, Airbnb. Фактически TS стал стандартом для крупных веб-проектов.

Установка

Для работы нужен Node.js (версии 18+) — вместе с ним устанавливается менеджер пакетов npm. Проверить наличие:

node --version   # v18.x или новее
npm --version

TypeScript устанавливается как npm-пакет. Глобальная установка даёт доступ к компилятору tsc из любой папки:

npm install -g typescript
tsc --version   # Version 5.x.x

Однако для реальных проектов рекомендуется локальная установка вместе с настройками проекта — это гарантирует одинаковую версию TypeScript у всех разработчиков команды:

# создаём папку проекта
mkdir my-app && cd my-app
npm init -y

# ставим TypeScript как dev-зависимость
npm install --save-dev typescript

# компилятор доступен через npx
npx tsc --version

Альтернатива: ts-node и tsx

Чтобы запускать .ts-файлы напрямую без явной компиляции, используют:

npm install --save-dev ts-node
npx ts-node hello.ts   # сразу запускает, без отдельной сборки

Более современный и быстрый вариант — tsx (на базе esbuild):

npm install --save-dev tsx
npx tsx hello.ts

Первый файл

Создадим файл hello.ts (расширение .ts):

// hello.ts
const message: string = "Привет, TypeScript!";
console.log(message);

// Тип убеждается, что в message нельзя записать число
// message = 42; // Ошибка: тип "number" нельзя присвоить типу "string"

Скомпилируем его в JavaScript:

tsc hello.ts

Рядом появится hello.js — именно его запускает Node.js или браузер:

// Содержимое hello.ts после компиляции
"use strict";
const message = "Привет, TypeScript!";
console.log(message);

Запустим:

node hello.js   # Привет, TypeScript!

Что произошло с типами

Компилятор проверил типы, убедился, что ошибок нет, и выбросил их — в итоговом JavaScript никаких : string не остаётся. Это и есть «стирание типов» (type erasure).

Рабочий процесс в реальном проекте

Структура типичного проекта:

my-app/
├── src/
│   ├── index.ts
│   ├── utils.ts
│   └── api/
│       └── users.ts
├── dist/           # сюда складывается скомпилированный JS
├── package.json
└── tsconfig.json   # конфигурация компилятора

Скрипты в package.json:

{
    "scripts": {
        "build": "tsc",
        "dev": "ts-node src/index.ts",
        "typecheck": "tsc --noEmit"
    }
}

Так разделены роли:

• npm run build — сборка production-версии в dist/.
• npm run dev — быстрый запуск в разработке без явной сборки.
• npm run typecheck — только проверка типов (используется в CI).

Настройка редактора

Лучшая поддержка TypeScript — в VS Code (он сам написан на TS). Для других редакторов (WebStorm, Sublime, Vim, Emacs) есть плагины. Что вы получаете сразу после установки:

• Подсветка ошибок прямо в коде (красные подчёркивания).
• Автодополнение свойств объектов по их типу.
• Показ документации при наведении на функцию.
• Переход к определению (F12) и поиск всех использований.
• Безопасное переименование (F2) с обновлением всех ссылок.

Типичные ошибки начинающих

1. Доверие к типу «снаружи»

Если данные пришли из API или JSON.parse, TypeScript не может их проверить — он верит вашей аннотации:

// ОПАСНО: реальный объект может быть любым
const user: User = JSON.parse(response);

Без валидации в рантайме это источник багов. Поэтому данные «снаружи» проверяют библиотеками вроде zod или class-validator.

2. Использование any как универсального решения

any отключает проверки — это эквивалент «выключить TypeScript». Лучше unknown или конкретный тип. Подробнее — в главе 2.

3. Установка глобально вместо локально

На разных машинах разработчиков окажутся разные версии TS, и сборка будет вестись по-разному. В команде — только локальная установка через devDependencies.

Практика

1. Установите Node.js и TypeScript (локально в папку проекта).
2. Создайте файл hello.ts, скомпилируйте и запустите результат.
3. Попробуйте намеренно допустить ошибку типа (например, присвоить число строковой переменной) и посмотрите, как на неё реагирует редактор.
4. Подключите ts-node или tsx и запустите файл без явной компиляции.

Итог

TypeScript — это надстройка над JavaScript со статической типизацией. Типы проверяются на этапе компиляции и стираются из итогового JS. Мы установили компилятор, написали первый файл, разобрались с рабочим процессом сборки и запуска. В следующей главе переходим к базовым типам языка.