Введение в TypeScript

Введение в TypeScript

Технический фундамент TypeScript как системы типов

Важно понимать, как TypeScript устроен технически:

  • типы проверяются только на этапе разработки и компиляции;
  • после компиляции в рантайме остается обычный JavaScript;
  • TypeScript использует в основном структурную типизацию (совместимость по форме, а не по имени типа);
  • уровень строгости зависит от настроек tsconfig (strict, noImplicitAny, strictNullChecks и др.).

Это объясняет, почему один и тот же код может быть "валидным в TS" при мягких настройках и невалидным при строгих.

Мини-пример структурной типизации (важно понять именно идею "по форме"):

type User = { id: number; name: string };
type Person = { id: number; name: string };

const user: User = { id: 1, name: 'Anna' };
const person: Person = user; // OK: типы разные по имени, но совместимы по структуре

Смотри, что важно: если в Person добавить обязательное поле (например, age: number), присваивание станет ошибкой, потому что структура перестанет совпадать.

Зачем JavaScript-разработчику TypeScript

JavaScript гибкий и быстрый для старта, но на больших проектах гибкость превращается в риск: случайные undefined, ошибки типов в рантайме, сложные рефакторинги. TypeScript добавляет статическую типизацию поверх JavaScript и помогает ловить проблемы до запуска кода.

Ключевой момент: TypeScript не заменяет JavaScript, а расширяет его и проверяет твой код на этапе разработки.

Проверь себя: почему ошибка, найденная в редакторе до запуска, почти всегда дешевле ошибки в продакшене?

Что такое TypeScript простыми словами

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

  • любой валидный JS-код - валидный TS-код;
  • в TS ты можешь добавлять типы (string, number, интерфейсы и т.д.);
  • затем TypeScript компилирует код в обычный JavaScript.
let userName = 'Anna';
userName = 42; // JS пропустит, но это логически опасно

let userName: string = 'Anna';
userName = 42; // Ошибка TypeScript: number не подходит к string

Смотри, что важно: TypeScript проверяет типы до выполнения, но в браузере/Node в итоге все равно исполняется JavaScript.

Как устроен процесс разработки

Обычно рабочий цикл такой:

  1. Пишешь .ts/.tsx.
  2. TypeScript проверяет типы.
  3. Компилятор (tsc) генерирует .js.
  4. Запускается уже JS.

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

Проверь себя: почему типы из TS не могут "поймать" все логические ошибки в рантайме?

Что TypeScript дает команде

  1. Явные контракты функций и данных.

Сигнатура функции сразу показывает, что она принимает и что возвращает.

  1. Безопасный рефакторинг.

Переименовал поле или поменял тип - компилятор покажет все места, где нужно исправить.

  1. Лучшая автодополняемость и навигация в IDE.

Подсказки становятся точнее, меньше "угадывания" API.

  1. Снижение количества багов типа "не тот формат данных".

Особенно это заметно при работе с API и большими объектами.

Мини-сценарии из продукта

  1. Ответ API профиля.

Без типизации поле age может прийти строкой, и баг всплывет только в рантайме. С TypeScript ты описываешь ожидаемую структуру и видишь проблему сразу.

  1. Форма регистрации.

Типы помогают не перепутать boolean-флаг и строковое поле email при передаче в сервис.

  1. Командная разработка.

Новый разработчик быстрее понимает модель данных, потому что контракт описан типами, а не только комментариями.

Частые ошибки новичков

  • Считать, что TypeScript "лечит" любую архитектурную проблему.
  • Добавлять any везде и терять смысл типизации.
  • Пытаться типизировать всё сразу в legacy-коде без постепенного подхода.
  • Игнорировать сообщения компилятора вместо исправления причин.

Анти-провал: используй any как временный мост, а не как постоянное решение.

Что будет, если изменить входные данные

Если функция ожидает number, а ты передашь string, TypeScript выдаст ошибку до запуска. В чистом JS это часто проявится позже как NaN или неожиданный результат. Именно поэтому TS особенно полезен на границе модулей и при работе с внешними данными.

Проверь себя: где типизация дает наибольшую пользу - в коротком скрипте на 20 строк или в проекте с десятками модулей?

Краткий итог

  • TypeScript это надстройка над JavaScript со статической типизацией.
  • Он помогает ловить ошибки типов до выполнения кода.
  • Компиляция TS -> JS сохраняет совместимость с текущей экосистемой.
  • Главная ценность TS в крупных проектах: контракты, рефакторинг, понятность кода.
  • TypeScript усиливает качество разработки, но не заменяет здравую архитектуру и тесты.