TypeScript введение и настройка

TypeScript — надмножество JavaScript от Microsoft, добавляющее опциональную статическую типизацию: компилятор tsc проверяет типы и транспилирует .ts-файлы в JavaScript перед выполнением.

Зачем нужно

  • Статическая типизация ловит целый класс ошибок до запуска программы — несовпадение типов, опечатки в именах свойств, вызов несуществующих методов
  • IDE получает полную информацию о типах и предоставляет точное автодополнение, рефакторинг и переход к определению
  • TypeScript является стандартом в современной фронтенд-разработке: React, Angular, Vue 3, Next.js, NestJS — все поддерживают TypeScript из коробки

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

  • Любой новый frontend-проект (Vite, Create React App, Next.js, Nuxt)
  • Backend на Node.js (NestJS, Fastify, Express + TS)
  • Библиотеки и npm-пакеты — типы публикуются вместе с кодом
  • Монорепозитории — единая система типов через весь проект

Основной контент

Установка и первый запуск

# Установка компилятора
npm install -D typescript

# Инициализация tsconfig.json
npx tsc --init

# Компиляция одного файла
npx tsc index.ts

# Компиляция всего проекта по tsconfig
npx tsc

# Watch-режим (перекомпиляция при изменениях)
npx tsc --watch

Первый TypeScript-файл

// hello.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// TypeScript ловит ошибку типа ДО запуска
console.log(greet(42));
// Argument of type 'number' is not assignable to parameter of type 'string'

console.log(greet("World")); // OK

tsconfig.json — ключевые опции

{
  "compilerOptions": {
    // Таргет — в какой JS компилировать
    "target": "ES2020",

    // Система модулей
    "module": "ESNext",
    "moduleResolution": "bundler",

    // Строгий режим — рекомендуется включить сразу
    "strict": true,

    // Выходная директория
    "outDir": "./dist",
    "rootDir": "./src",

    // Декларационные файлы (.d.ts) — нужны для библиотек
    "declaration": true,

    // Совместимость с CommonJS-пакетами
    "esModuleInterop": true,

    // Пропускать проверку типов в node_modules
    "skipLibCheck": true,

    // Source maps для отладки
    "sourceMap": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

strict-режим — что включает

strict: true включает 7 флагов:
  strictNullChecks       — null/undefined не присваиваются к другим типам
  noImplicitAny          — нельзя неявно получить тип any
  strictFunctionTypes    — строгая проверка типов функций
  strictBindCallApply    — проверка bind/call/apply
  strictPropertyInitialization — свойства класса должны быть инициализированы
  noImplicitThis         — this должен иметь тип
  alwaysStrict           — "use strict" в каждом файле

Интеграция с инструментами

# Vite + React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Next.js (TypeScript из коробки)
npx create-next-app@latest my-app

# ts-node — запуск .ts напрямую в Node.js
npm install -D ts-node
npx ts-node src/index.ts

# tsx — быстрый запуск без компиляции (esbuild под капотом)
npm install -D tsx
npx tsx src/index.ts

Type inference — TypeScript выводит типы автоматически

// Не нужно аннотировать каждую переменную
const message = "hello";       // string
const count = 42;              // number
const active = true;           // boolean
const items = [1, 2, 3];       // number

const user = { id: 1, name: "Alice" };
// { id: number; name: string }

// Функция — тип возвращаемого значения выводится
function double(n: number) {
  return n * 2; // возвращает number
}

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

  • Не включать strict: true — без него TypeScript гораздо мягче и пропускает опасные паттерны
  • Компилировать в target: "ES5" без нужды — современные браузеры и Node.js поддерживают ES2020+, старый target увеличивает объём кода
  • Хранить скомпилированные файлы в репозитории — dist/ должен быть в .gitignore
  • Путать ts-node и tsc — ts-node для разработки/скриптов, tsc для сборки production
  • Игнорировать ошибки компилятора через // @ts-ignore — накапливается технический долг, лучше разобраться с причиной

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

Ресурсы