TypeScript с нуля в 2025: практическое руководство

Введение: зачем изучать TypeScript в 2025 году?

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

В этой статье мы разберем практические аспекты: как настроить окружение, освоить базовые типы, познакомиться с интерфейсами и generics. Вы увидите, что TypeScript не усложняет разработку, а наоборот — экономит часы отладки.

1. Установка и настройка TypeScript в 2025 году

Первый шаг — установка компилятора TypeScript. В 2025 году наиболее удобный способ — использовать Node.js и менеджер пакетов npm (или yarn). Убедитесь, что Node.js версии 20+ установлен.

# Установка TypeScript глобально
npm install -g typescript

# Проверка версии
tsc --version

Теперь создайте папку для проекта и инициализируйте его:

mkdir my-first-ts
cd my-first-ts
npm init -y

Далее создадим файл конфигурации tsconfig.json. Это сердце любого TypeScript-проекта, где вы указываете настройки компиляции.

tsc --init

После выполнения команды появится файл с множеством опций. Для начала достаточно оставить настройки по умолчанию. Главное — убедитесь, что параметр strict: true включен (он включен по умолчанию). Это заставит вас писать более качественный код.

Структура проекта в 2025 году часто включает папки src (исходники) и dist (скомпилированные файлы). Создайте их:

mkdir src dist

И добавьте в tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "target": "ES2022",
    "module": "ESNext"
  },
  "include": ["src/**/*"]
}

Теперь создайте первый файл src/index.ts и напишите простой код:

// src/index.ts
function greet(name: string): string {
  return `Привет, ${name}! Добро пожаловать в TypeScript.`;
}

const userName: string = "Алексей";
console.log(greet(userName));

Скомпилируйте его командой tsc. В папке dist появится index.js. Запустите его через Node.js: node dist/index.js. Вы увидите приветствие. Поздравляю, вы написали свою первую программу на TypeScript!

2. Основы типов: статическая типизация на практике

Главное преимущество TypeScript — система типов. В 2025 году она стала еще более гибкой. Рассмотрим базовые типы, которые вы будете использовать каждый день.

Примитивные типы

К ним относятся string, number, boolean, null, undefined, symbol и bigint. TypeScript автоматически выводит тип, если он очевиден:

let age: number = 25;        // явное указание
let name = "Мария";          // TypeScript выведет string
let isActive = true;         // выведет boolean

Массивы и кортежи

Массивы в TypeScript могут быть однотипными или разнотипными (кортежи).

// Массив чисел
let scores: number[] = [10, 20, 30];

// Альтернативная запись
let scores2: Array<number> = [10, 20, 30];

// Кортеж (фиксированная длина и типы)
let person: [string, number] = ["Иван", 30];

Тип any и unknown

Избегайте any — он отключает проверку типов. Вместо него используйте unknown, если тип неизвестен:

let data: unknown = fetchData();
if (typeof data === "string") {
  console.log(data.toUpperCase()); // безопасно
}

Пользовательские типы (type alias)

Создавайте собственные типы для удобства:

type UserID = string | number;
type Status = "active" | "inactive" | "banned";

let userId: UserID = "abc123";
let userStatus: Status = "active";

Эти основы помогут вам избежать 90% ошибок, связанных с типами, еще на этапе написания кода.

3. Интерфейсы и Generics: строим гибкую архитектуру

В 2025 году TypeScript предлагает мощные инструменты для описания форм объектов и создания переиспользуемых компонентов.

Интерфейсы

Интерфейсы определяют структуру объекта. Они незаменимы при работе с API, базами данных или сложными конфигами.

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin?: boolean; // необязательное поле
}

function createUser(user: User): void {
  console.log(`Создан пользователь: ${user.name}`);
}

const newUser: User = {
  id: 1,
  name: "Ольга",
  email: "olga@example.com"
};

createUser(newUser);

Интерфейсы можно расширять:

interface Admin extends User {
  permissions: string[];
}

const admin: Admin = {
  id: 2,
  name: "Администратор",
  email: "admin@site.com",
  permissions: ["read", "write", "delete"]
};

Generics (обобщения)

Generics позволяют создавать функции и классы, работающие с разными типами, сохраняя строгую типизацию. Это ключевая концепция для создания библиотек и утилит.

// Функция, возвращающая переданный аргумент
function identity<T>(arg: T): T {
  return arg;
}

const num = identity<number>(42);    // тип number
const str = identity("Hello");       // тип string вы