Перейти к содержимому
Учи.Онлайн Выбрать школу
Статья

TypeScript: что это, где применяется и как освоить

TypeScript — надстройка над JavaScript, в которой вы описываете типы: какие поля есть у заказа, что принимает функция, что возвращает сервер. Компилятор tsc читает эти описания и до запуска показывает, где в функцию передают строку вместо числа, забыли обработать пустое значение или опечатались в названии поля. Фронтендер типизирует свойства компонентов и ответы API, бэкендер на Node.js — входящие запросы и строки из базы, автоматизатор тестов — страницы и тестовые данные. Для работы нужны уверенный JavaScript, настройка tsconfig.json, строгий режим и умение проверять данные, которые приходят извне.

Автор: редакция Учи.ОнлайнОтветственный редактор: Дмитрий Игнатьев
Содержание
Иллюстрация к статье: TypeScript: что это, где применяется и как освоить

Главное заблуждение новичков — будто TypeScript делает программу надёжной сам по себе. На деле он проверяет только то, что вы ему описали, и только до запуска. После компиляции типы стираются, остаётся обычный JavaScript. Если сервер вместо числа прислал строку, а в коде написано, что там число, компилятор промолчит: он поверил вашему описанию. Поэтому сильная сторона TypeScript — порядок внутри вашего кода, а на границе с внешним миром данные всё равно нужно проверять.

Кому и зачем нужны типы

Самая заметная польза видна при изменениях. Допустим, бэкенд переименовал поле price в total. В JavaScript вы ищете это слово поиском и надеетесь, что нашли все места. В TypeScript достаточно поменять описание типа: компилятор перечислит каждую строку, где поле используется по-старому.

Фронтендеру типы помогают держать в порядке свойства компонентов, состояние форм и ответы сервера, бэкендеру на Node.js — тело запроса и результаты запросов к базе. Автоматизатору они дают подсказки по методам Playwright и защищают от опечаток в классах страниц.

Скрипт на пятьдесят строк, который вы запустите дважды, быстрее написать на JavaScript. Типы начинают экономить время, когда код живёт месяцами, его правят несколько человек и данные передаются между частями программы.

Чего TypeScript не гарантирует

Компилятор по умолчанию выпускает JavaScript даже из кода с ошибками типов, если не включить опцию noEmitOnError. Его легко обмануть: any отключает проверку, as User заставляет поверить на слово, восклицательный знак после выражения обещает, что там не null. Каждый такой приём переносит ошибку со сборки на работу программы.

Есть и граница самого метода. В исследовании Гао, Берда и Барра на конференции ICSE 2017 (статья «To Type or Not to Type») авторы взяли 400 исправленных ошибок из 398 открытых проектов на JavaScript и проверили, заметили бы их TypeScript 2.0 и Flow. Каждый поймал около 15 %. Больше половины ошибок, 55 %, оказались ошибками понимания требований: код делает не то, что нужно, хотя с типами у него всё в порядке. Авторы оговариваются, что эти ошибки уже прошли тесты и ревью, так что при разработке типы ловят больше. Но логику проверяют тесты.

Учебный пример: ответ сервера, которому нельзя верить на слово

Ситуация учебная. Страница заказа получает данные с сервера. Если написать const order = await res.json() as Order, компилятор примет всё что угодно. Надёжнее объявить результат как unknown — тип, с которым нельзя ничего сделать без проверки, — и проверить форму данных функцией-предикатом:

type Order = { id: number; total: number; status: 'new' | 'paid' | 'cancelled' };

function isOrder(x: unknown): x is Order {
  if (typeof x !== 'object' || x === null) return false;
  const o = x as Record<string, unknown>;
  return typeof o.id === 'number' && typeof o.total === 'number'
    && ['new', 'paid', 'cancelled'].includes(String(o.status));
}

async function loadOrder(id: number): Promise<Order> {
  const data: unknown = await (await fetch(`/api/orders/${id}`)).json();
  if (!isOrder(data)) throw new Error(`Неожиданный ответ для заказа ${id}`);
  return data;
}

Если сервер пришлёт "total": "1500" строкой, код без проверки сложит её с доставкой и покажет покупателю сумму «1500200». С проверкой вы получите понятную ошибку в момент загрузки. На больших проектах такие проверки пишут не вручную, а через библиотеки схем вроде Zod, но принцип тот же.

Строгий режим и новые версии компилятора

Строгий режим strict — набор проверок, главная из которых strictNullChecks: без неё null и undefined молча подходят под любой тип. Долгие годы этот режим был выключен по умолчанию, и многие инструкции по переводу проекта до сих пор на это рассчитывают.

В анонсе TypeScript 6.0 от 23 марта 2026 года strict стал включён по умолчанию: проекту, который на это полагался, теперь нужно явно записать "strict": false. Там же опция types по умолчанию стала пустым массивом, то есть компилятор больше не подключает сам все установленные пакеты @types. Для тестировщика это выглядит так: после обновления проект с тестами на Jest перестаёт собираться с ошибками «Cannot find name 'describe'» и «Cannot find name 'process'», а лечится всё строкой "types": ["node", "jest"] в tsconfig.json. Версия 6.0 — последняя на старой кодовой базе, и она пометила устаревшими опции target: es5, baseUrl, moduleResolution: node, outFile.

TypeScript 7.0, вышедший 8 июля 2026 года, — это компилятор, переписанный на Go. Он примерно в десять раз быстрее: проверка кода VS Code заняла 10,6 секунды вместо 125,7. Но устаревшие в 6.0 опции здесь стали жёсткими ошибками, а программного интерфейса, на который опираются typescript-eslint и часть сборщиков, в 7.0 пока нет; проекты на Vue и Svelte, по словам авторов, скорее всего ещё не перейдут. Для них выпущен пакет @typescript/typescript6, который ставится рядом. Вывод: прежде чем обновлять старый проект, соберите его на 6.0 и уберите все предупреждения об устаревших опциях.

Порядок освоения и перевод проекта

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

  1. Проверка без переписывания: allowJs, checkJs и tsc --noEmit в существующем проекте, типы в комментариях JSDoc.
  2. Переименование «листовых» модулей в .ts: утилит и констант, от которых зависят остальные.
  3. Типы для данных извне: ответы API, переменные окружения, строки из базы — с проверкой, как в примере выше.
  4. Строгость по частям: если strict сразу даёт слишком много ошибок, выключите его явно и включайте проверки по одной, начиная с noImplicitAny и strictNullChecks.
  5. Проверка типов в конвейере: команда tsc --noEmit перед тестами, чтобы ошибки не попадали в основную ветку.

Этот порядок лучше тренировать на проекте, где есть и интерфейс, и запросы к серверу. При коммерческом опыте на JavaScript подойдёт онлайн-курс «Мидл фронтенд-разработчик» от Яндекс Практикума: пять месяцев, мессенджер на TypeScript с собственным роутером, HTTP-модулем и WebSocket, затем командная игра на React; проекты проверяют ревьюеры. Новичкам программа не подходит.

Упражнения и ошибки новичков

Хорошее упражнение — добавить // @ts-check в начало своего старого скрипта и исправить всё, что подсветит редактор. Затем опишите тип для ответа любого открытого API и напишите к нему функцию-проверку. Результат проверяется просто: tsc --noEmit проходит без ошибок при включённом strict, а намеренно испорченные данные от сервера вызывают понятную ошибку, а не странное поведение.

Первая типичная ошибка — any как способ заглушить компилятор: он расползается по коду, и через месяц половина проверок отключена. Вторая — as вместо проверки. Третья — // @ts-ignore без объяснения, почему это безопасно. Четвёртая — типы-головоломки там, где хватило бы объединения строк: коллега их не прочитает, а через полгода и вы сами.

TypeScript на сервере и в автотестах

На бэкенде типы особенно полезны на входе: тело запроса описывают типом и проверяют схемой, а дальше код работает с надёжными данными. Фреймворк Nest.js построен на TypeScript целиком, включая декораторы для контроллеров. Пройти этот путь системно можно на программе «Backend-разработчик на Node.js» от Purple School: TypeScript с дженериками и декораторами, Express, Nest.js, базы данных, Docker, 12 проектов; в эконом-тарифе наставника нет, цены уточняйте у школы.

Тестировщику важно знать особенность Playwright. По документации Playwright он запускает тесты на TypeScript без настройки, но типы не проверяет и выполнит тест даже с ошибками компиляции. Документация советует запускать tsc --noEmit отдельным шагом перед тестами, иначе тест с ошибкой в типах данных уйдёт в прогон и автоматизатору останутся только подсказки редактора.

Как навык влияет на доход

TypeScript редко бывает отдельной строкой в зарплате. Для ориентира: в калькуляторе зарплат Хабр Карьеры на 30 сентября 2026 года медиана у разработчиков с навыком TypeScript — 280 тысяч рублей в месяц по 1 264 анкетам, у разработчиков с навыком JavaScript — около 265 тысяч по 998 анкетам. Это все уровни и регионы вместе и зарплаты, указанные самими специалистами, а не предложения в вакансиях. Разницу нельзя читать как надбавку за TypeScript: в выборках разная доля опытных разработчиков, а многие отмечают оба навыка.

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

Как выбрать обучение

Отдельные курсы по TypeScript редки; чаще язык идёт блоком в программе по фронтенду, бэкенду или автотестам. Проверьте, есть ли в программе строгий режим, дженерики, типизация ответов сервера и проект, целиком написанный на TypeScript. Спросите, на какой версии компилятора построены материалы: после 6.0 и 7.0 часть старых настроек не работает.

Если JavaScript пока неуверенный, разумно выбрать программу, где типы идут после основ языка. Например, онлайн-курс «Front End разработчик» от TeachMeSkills идёт семь месяцев вечерними живыми занятиями без записей: вёрстка, JavaScript, затем TypeScript с интерфейсами и дженериками, React, тесты на Jest и Cypress, два дипломных проекта. Цену сверьте со школой.

Смотрите не на число тем в описании, а на то, кто проверяет ваш код. TypeScript легко «выучить» по видео и продолжать писать any повсюду: эту привычку исправляет только ревью.

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