Новинки TypeScript: пошаговая инструкция за 1 час. От декораторов до satisfies

TypeScript постоянно эволюционирует, и каждый новый релиз приносит инструменты, делающие код более типобезопасным, выразительным и удобным в поддержке. Если у вас есть час, вы можете совершить экспресс-тур по ключевым новинкам последних версий (5.0, 5.1, 5.2, 5.3) и немедленно начать применять их в своих проектах. Эта инструкция построена как практический воркшоп: от простого к сложному, с примерами кода, которые вы можете опробовать прямо в TypeScript Playground или локальном проекте.

Шаг 1: Подготовка среды. Убедитесь, что у вас установлен TypeScript версии 5.0 или выше. Проверьте командой `tsc --version`. Если версия старше, обновите: `npm install -g typescript` или `npm install --save-dev typescript@latest` для проекта. Для быстрого экспериментирования откройте официальный TypeScript Playground (typescriptlang.org/play) — там всегда актуальная версия.

Шаг 2: Оператор `satisfies` — баланс между выводом типов и проверкой. Одна из самых значимых новинок TypeScript 5.0. Проблема: иногда нам нужно убедиться, что выражение соответствует определенному типу, но при этом не хотим терять конкретный вывод типов для его частей. Раньше использовали аннотацию типа (`:`) или `as`. `satisfies` предлагает элегантное решение.

Рассмотрим пример. Допустим, у нас есть объект цветов, где значения могут быть либо строкой (hex), либо кортежем RGB. Мы хотим проверить, что ключи соответствуют типу `Record`, но при этом сохранить точные литеральные типы для ключей и конкретные типы для значений.

type Colors = "red" | "green" | "blue";
type Palette = Record;

// Старый способ с аннотацией теряет конкретику:
const oldPalette: Palette = {
 red: "#ff0000",
 green: [0, 255, 0], // Тип значения здесь string | [number, number, number]
 blue: "#0000ff"
};
// oldPalette.green.toUpperCase() // Ошибка: Property 'toUpperCase' does not exist on type 'string | [number, number, number]'.

// Новый способ с satisfies:
const newPalette = {
 red: "#ff0000",
 green: [0, 255, 0],
 blue: "#0000ff"
} satisfies Palette;
// newPalette.green теперь имеет точный тип [number, number, number]!
// newPalette.red — тип string.
// При этом проверка на соответствие типу Palette выполнена.

Шаг 3: Декораторы на стадии ECMAScript. TypeScript 5.0 представил переработанную поддержку декораторов, соответствующую текущему предложению в стандарт ECMAScript (на стадии 3). Новый синтаксис более стандартизирован и мощный. Давайте создадим простой декоратор для логирования вызовов метода.

function log(
 target: (this: This, ...args: Args) => Return,
 context: ClassMethodDecoratorContext Return>
) {
 const methodName = String(context.name);
 return function (this: This, ...args: Args): Return {
 console.log(`LOG: Calling ${methodName} with`, args);
 const result = target.call(this, ...args);
 console.log(`LOG: ${methodName} returned`, result);
 return result;
 };
}

class Calculator {
 @log
 add(x: number, y: number): number {
 return x + y;
 }
}

const calc = new Calculator();
calc.add(2, 3); // В консоли: LOG: Calling add with [2, 3] и LOG: add returned 5

Обратите внимание на новые типы `ClassMethodDecoratorContext`. Декораторы теперь могут применяться не только к методам, но и к полям, аксессорам (геттерам/сеттерам) и даже к самим классам.

Шаг 4: `const`-аннотации типов для параметров. В TypeScript 5.0 появилась возможность указывать, что параметр функции должен трактоваться как константа, что сужает вывод типа к литеральному типу. Это особенно полезно для API, принимающих примитивные значения, которые не должны расширяться (widening).

function printShapes(shapes: readonly string[]) {
 console.log(shapes);
}
// Без const-аннотации массив расширяется до string[]
printShapes(["circle", "square"]); // shapes: string[]

// С const-аннотацией тип выводится как readonly ["circle", "square"]
printShapes(["circle", "square"] as const); // Старый способ

// Новый способ в сигнатуре функции (TypeScript 5.0):
function printShapesNew(shapes: T) {
 console.log(shapes);
}
printShapesNew(["circle", "square"]); // T выводится как readonly ["circle", "square"]

Шаг 5: Улучшения `enum`. TypeScript 5.0 представил «объединенные enum» (union enums) с новым флагом `--verbatimModuleSyntax`. Но более практичная новинка — это улучшенная типобезопасность для числовых enum при использовании с `Object.keys` и подобными методами. Теперь TypeScript лучше различает ключи и значения.

Шаг 6: Новые опции модульного разрешения. TypeScript 5.0 упростила настройку модулей, введя пресеты. В `tsconfig.json` можно указать `"moduleResolution": "bundler"` для совместимости с современными сборщиками (Vite, esbuild, swc), которые поддерживают гибридные схемы разрешения.

Шаг 7: Скорость и эффективность. Под капотом TypeScript 5.0 перешла на модули ECMAScript, что ускорило компиляцию и использование памяти. Это не синтаксическое изменение, но вы почувствуете его, обновившись: `npm run build` станет выполняться заметно быстрее для больших проектов.

Шаг 8: Экспорт только типов. Синтаксис `export type *` был улучшен. Теперь можно переэкспортировать только типы из модуля, что помогает избежать случайного экспорта значений.

Шаг 9: Продвинутые возможности: точнее выводимые типы для `in` оператора (TypeScript 5.1), раздельные параметры `jsx` для разработки и продакшена (TypeScript 5.2), импорт атрибутов через `with` (TypeScript 5.3 для декораторов метаданных). На их глубокое изучение может потребоваться больше часа, но знать об их существовании полезно.

Финальный шаг: Внедрение в проект. Откройте ваш рабочий `tsconfig.json`. Установите `"target": "ES2022"` (или выше), `"module": "NodeNext"` / `"ESNext"`, рассмотрите `"moduleResolution": "Bundler"`. Начните с рефакторинга: найдите места, где используется `as` для приведения типов в сложных объектах, и попробуйте заменить на `satisfies`. Найдите устаревшие экспериментальные декораторы (`"experimentalDecorators": true`) и обновите их синтаксис до нового стандарта, если готовы к миграции. Проанализируйте функции, принимающие литеральные массивы, и добавьте `const`-аннотации для большей типобезопасности.

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