Что такое TypeScript

TypeScript — это строго типизированный надмножество JavaScript, которое компилируется в чистый JavaScript.

Зачем нужно

  • Раннее обнаружение ошибок — ошибки типов ловятся на этапе компиляции, а не в рантайме
  • Автодополнение и рефакторинг — IDE понимает структуру кода и предлагает точные подсказки
  • Самодокументирующийся код — типы описывают контракты функций и объектов
  • Масштабируемость — чем больше проект, тем больше отдача от типизации
  • Снижение количества багов — исследования показывают снижение на ~15% только за счёт типов

Где используется

  • Крупные frontend-фреймворки: Angular (написан на TS), React (поддерживает TS), Vue 3 (написан на TS)
  • Backend: Node.js с TypeScript (NestJS, Express + TS)
  • Мобильная разработка: React Native, Ionic
  • Desktop: Electron (VS Code написан на TS)
  • Инфраструктура: Deno, Bun нативно поддерживают TS

Предпосылки

  • Базовое знание JavaScript (переменные, функции, объекты, массивы)
  • Понимание ES6+ синтаксиса (arrow functions, destructuring, modules)
  • Опыт работы с npm

TypeScript — надмножество JavaScript

Любой валидный JavaScript-код является валидным TypeScript-кодом. TypeScript добавляет поверх JS систему статических типов:

// Это валидный JS и валидный TS
const greeting = "Hello";
console.log(greeting);

// А это — только TS (аннотация типа)
const greeting: string = "Hello";
console.log(greeting);

Что добавляет TypeScript поверх JavaScript

// 1. Аннотации типов
let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;

// 2. Интерфейсы
interface User {
  id: number;
  name: string;
  email: string;
}

// 3. Типизированные функции
function getUser(id: number): User {
  return { id, name: "Alice", email: "alice@example.com" };
}

// 4. Generics (обобщённые типы)
function identity<T>(value: T): T {
  return value;
}

// 5. Enum
enum Status {
  Active,
  Inactive,
  Banned,
}

// 6. Вывод типов (type inference)
const count = 42; // TypeScript сам определит: number
const items = [1, 2, 3]; // number

Сравнение TypeScript и JavaScript

Критерий JavaScript TypeScript
Типизация Динамическая Статическая (опциональная)
Компиляция Интерпретируется Компилируется в JS
Ошибки В рантайме На этапе компиляции
Инструменты Базовые Мощное автодополнение
Кривая обучения Ниже Выше
Подходит для Мелкие проекты, прототипы Средние и крупные проекты
Совместимость Нативно в браузерах/Node Нужен этап компиляции

Как работает TypeScript

                  tsc (компилятор)
TypeScript (.ts) ─────────────────→ JavaScript (.js) → Браузер / Node.js
                  ↑
              tsconfig.json
            (настройки компиляции)
  1. Пишем код на TypeScript (.ts, .tsx)
  2. Компилятор tsc проверяет типы
  3. Если ошибок нет — генерируется JavaScript
  4. JavaScript запускается в браузере или Node.js

Важно: Все типы стираются при компиляции. В рантайме типов TypeScript не существует.

// TypeScript (до компиляции)
function add(a: number, b: number): number {
  return a + b;
}

// JavaScript (после компиляции)
function add(a, b) {
  return a + b;
}

Когда стоит использовать TypeScript

Используйте TypeScript когда:

  • Проект больше ~1000 строк кода
  • Команда больше 1 человека
  • Есть сложные структуры данных
  • Нужна надёжность (финтех, медицина)
  • Проект долгоживущий (будет поддерживаться годами)

JavaScript достаточно когда:

  • Быстрый прототип или proof-of-concept
  • Маленький скрипт на 50 строк
  • Одноразовый скрипт автоматизации

Вывод типов (Type Inference)

TypeScript не требует указывать типы везде — он умеет выводить их автоматически:

// Явная аннотация — не нужна, TS сам поймёт
let message: string = "Hello";

// Вывод типов — TS определит тип как string
let message = "Hello";

// TS выводит тип возвращаемого значения как number
function add(a: number, b: number) {
  return a + b; // return type: number
}

// TS выводит тип из контекста
const numbers = [1, 2, 3];
// map callback: (value: number, index: number) => number
const doubled = numbers.map((n) => n * 2);

Частые ошибки

  1. Думать что TS проверяет типы в рантайме — нет, все типы стираются при компиляции
  2. Использовать any повсюду — это отключает проверку типов и лишает смысла TS
  3. Пытаться типизировать всё сразу — начинайте с strict: false и включайте опции постепенно
  4. Забывать про null и undefined — включите strictNullChecks
  5. Путать TS с другими типизированными языками — TS использует структурную типизацию, не номинативную
// Структурная типизация: совместимость по структуре, а не по имени
interface Point {
  x: number;
  y: number;
}

interface Coordinate {
  x: number;
  y: number;
}

const p: Point = { x: 1, y: 2 };
const c: Coordinate = p; // OK! Структура совпадает

Практика

  1. Установите TypeScript: npm install -g typescript
  2. Создайте файл hello.ts:
    function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet("World"));
// console.log(greet(42)); // Раскомментируйте — увидите ошибку
  3. Скомпилируйте: tsc hello.ts
  4. Запустите: node hello.js
  5. Попробуйте вызвать greet(42) — посмотрите на ошибку компилятора

Связанные темы

Ресурсы