Найти в Дзене

TypeScript: 7 шагов к успешной миграции с JavaScript — без потери функциональности

Есть такой особый вид боли: проект на JavaScript, который живёт третий год, фронт обновлял уже четвёртый человек, половина логики — в голове у одного backend-разработчика, которого давно нет в компании, а вторая половина — в комментариях типа «не трогать, всё ломается». И вроде бы всё как-то крутится, клиенты платят, прод живой, но каждый релиз превращается в мини-лотерею: что отвалится на этот раз. Звучит знакомо? В какой-то момент любой нормальный разработчик смотрит на это, вздыхает и произносит сакральное: «Нам нужен TypeScript». А менеджер, услышав слово «миграция», начинает судорожно пересчитывать дедлайны и бюджет, потому что в его картине мира «переписать всё на TypeScript» означает «приложение не работает два месяца, команда горит, заказчик нервничает». Поэтому большинству проектов проще жить на полуразваленном JavaScript, чем решиться на аккуратный и спокойный переезд. Хотя на самом деле, если подойти с головой и автоматизацией, можно сделать миграцию без остановки бизнеса, а
Оглавление
   7 шагов к успешной миграции с JavaScript на TypeScript Артур Хорошев
7 шагов к успешной миграции с JavaScript на TypeScript Артур Хорошев

Почему вообще лезть в TypeScript, если и так всё работает

Есть такой особый вид боли: проект на JavaScript, который живёт третий год, фронт обновлял уже четвёртый человек, половина логики — в голове у одного backend-разработчика, которого давно нет в компании, а вторая половина — в комментариях типа «не трогать, всё ломается». И вроде бы всё как-то крутится, клиенты платят, прод живой, но каждый релиз превращается в мини-лотерею: что отвалится на этот раз. Звучит знакомо?

В какой-то момент любой нормальный разработчик смотрит на это, вздыхает и произносит сакральное: «Нам нужен TypeScript». А менеджер, услышав слово «миграция», начинает судорожно пересчитывать дедлайны и бюджет, потому что в его картине мира «переписать всё на TypeScript» означает «приложение не работает два месяца, команда горит, заказчик нервничает». Поэтому большинству проектов проще жить на полуразваленном JavaScript, чем решиться на аккуратный и спокойный переезд. Хотя на самом деле, если подойти с головой и автоматизацией, можно сделать миграцию без остановки бизнеса, а иногда даже с улучшением процессов вокруг разработки.

Зачем вам TypeScript, кроме модного слова в резюме

Если вы пишете на чистом JavaScript и живёте счастливо — значит, вы просто ещё не видели, как может быть. Статическая типизация даёт не абстрактное «качество кода», а вполне житейские плюсы. Например, когда вы не отстреливаете себе ногу, передавая строку туда, где функция ожидает объект, и узнаёте об этом не от разъярённого клиента в понедельник утром, а от компилятора ещё на стадии разработки. Или когда вы через полгода возвращаетесь в модуль, который писали сами, и вместо гадания «что я имел в виду» видите интерфейсы, normal типы и понятную структуру.

TypeScript особенно заходит там, где проект живой, API часто меняются, есть интеграции с внешними сервисами, куча автоматизаций и ботов. А сейчас таких систем всё больше: кто-то интегрирует amoCRM с Telegram, кто-то крутит сложные сценарии в Make.com, кто-то пилит дашборды для руководства. Везде летят запросы, объекты, события, и любое несоответствие формата данных превращается в тихую мину. Хорошо написанная типизация — это не красота ради красоты, а страховка от вот этого всего.

Шаг 1. Честно посмотреть на свои джейсы

Любая миграция начинается не с команды npm install typescript, а с неприглядного «что у нас вообще тут происходит». Сядьте и разложите кодовую базу по кучкам: где бизнес-логика, где работа с API, где UI, где всякий легаси, который «страшно трогать». Отдельно стоит отметить куски, которые критичны для денег: обработка заказов, биллинг, интеграции с CRM и платёжками. Если вы особенно любите острые ощущения, эти модули обычно написаны в стиле «одна функция на 300 строк».

Задача первого шага не в том, чтобы все переписать и «навести порядок», а в том, чтобы понять: с чего лучше начать миграцию, чтобы не улететь в прод с оторванными руками. Часто самым разумным стартом бывает не центр системы, а вспомогательные модули: утилиты, сервисы работы с датами, простые обёртки над API. Мигрируя их, вы сразу получаете первый профит: автодополнение, понятные типы на входе и выходе, меньше угадываний. Плюс вы успеваете чуть-чуть набить шишки на мелочах, пока не добрались до платежей.

Если у вас уже крутятся какие-то автоматизации вокруг проекта — например, CI/CD в GitLab, тесты в GitHub Actions, уведомления в Telegram через Make.com, — имеет смысл на этом же этапе понять, где вы хотите крутить проверки TypeScript. Можно сразу запланировать крючки: упал компиляция — улетело уведомление в общий чат, чтобы не ждать, пока кто-нибудь случайно нажмёт «merge».

Шаг 2. Поставить TypeScript и не сломать полпроекта за вечер

Тут соблазн велик: «сейчас я подключу TypeScript, включу строгий режим, и команда начнёт писать красиво». На практике это похоже на то, как если бы вы в тренажёрке сразу нагрузили штангу всеми блинами. tsconfig.json лучше начинать с более мягких настроек. Добавляете TypeScript в проект, настраиваете базовую компиляцию, подключаете его к сборщику — хоть Webpack, хоть Vite, хоть что вы там любите — и проверяете, что хотя бы пустой .ts файл нормально проходит через ваш пайплайн.

Хорошая идея — сразу привязать компиляцию к вашим существующим автоматизациям. Например, вы можете сделать сценарий в Make.com (зарегистрироваться можно здесь: Make.com), который при каждом пуше в main или dev запускает сборку, тесты и компиляцию TypeScript, а результат шлёт в Telegram, Slack, VK или куда вам удобнее. Ошибки компиляции — сразу в чат разработке, успешный билд — можно в канал с менеджерами, чтобы они знали, что релиз живой. Чем меньше ручных шагов вокруг миграции, тем меньше шанс, что кто-то скажет «ой, я забыл запустить проверки».

Шаг 3. Начать миграцию с минимальным вредом психике

Переводить JavaScript в TypeScript можно грубо, пафосно и очень больно: «с понедельника все пишем только .ts, старый код не трогаем, но он должен типизироваться». Обычно такой подход заканчивается тем, что разработчики тайком откатывают настройки или сваливают всё на один огромный any. Гораздо разумнее делать постепенную миграцию. Берёте небольшой модуль, переименовываете .js в .ts, чините минимум ошибок, добавляете временные any там, где сейчас не до идеальной типизации. Да, это не красиво, но зато код живёт.

Типичный сценарий: у вас есть модуль api.js, который экспортирует функции вроде getUser, getOrders, sendPayment. Вы переводите файл в api.ts, описываете базовые типы ответов от сервера, а там, где у вас полный зоопарк, честно ставите any и помечаете TODO. Главное тут — не пытаться за один раз описать всё, включая каждое поле, которое когда-либо может вернуться из вашего странного стороннего сервиса. Иначе вы просто застрянете на одном модуле на две недели.

Параллельно есть смысл тот же процесс «обернуть» автоматизацией. Например, через Make.com можно прикрутить сценарий: разработчик пушит в ветку, сценарий поднимает контейнер, гоняет компиляцию, линтер, тесты и шлёт отчёт. Хотите по красоте — можно даже сделать, чтобы при зелёной сборке автоматически ставился лейбл в GitHub / GitLab, а при красной — влетало предупреждение личным сообщениям. Автоматизация здесь выступает не как игрушка, а как способ не утонуть в ручных проверках во время миграции.

  📷
📷

Обучение по make.com

Шаг 4. Разобраться с типами сторонних библиотек и не проклясть всё

Один из самых неприятных моментов при миграции с JavaScript на TypeScript — это зоопарк сторонних библиотек. Что-то имеет свои типы из коробки, что-то — нет, где-то типы есть, но написаны человеком, который явно спешил на поезд. Тут важно не пытаться героически закрыть все дыры за один присест. Начните с ключевых зависимостей: фреймворк (React, Vue, Svelte), HTTP-клиент, основная UI-библиотека, всё, что связано с деньгами и авторизацией.

Если типы есть на DefinitelyTyped — ставите @types-пакеты и аккуратно подтягиваете их в проект. Если типов нет, но библиотека активно используется, можно набросать минимальные декларации: только те функции и объекты, которые вы реально трогаете. Да, это не идеально, но вы экономите время и нервы. На этом же этапе всплывают старые грехи: неявные any, странные обёртки над SDK и тонкие места в архитектуре. Лучше увидеть это сейчас, чем когда вы случайно сломаете интеграцию с платежной системой в проде.

И тут опять выручает автоматизация. Например, вы можете сделать отдельный сценарий в Make.com, который будет раз в день или раз в неделю прогонять полный цикл: сборка, типизация, юнит-тесты, интеграционные тесты, отчёты по покрытию. Результаты можно складывать в Notion, Google Sheets или прямо в CRM, а ссылки на отчёты закидывать в Telegram-чат команды. Так вы не будете зависеть от того, вспомнил ли кто-то из разработчиков «перед пушем запустить сборку с проверкой типов».

Шаг 5. Доверить рутину автоматизации, а себе — мозги

Весь фокус в том, что миграция javascript в typescript — это не только про код, это ещё и про процессы вокруг кода. Если вы всё делаете вручную — запуск компиляции, деплой, тесты, синхронизацию с таск-трекером — любая миграция превращается в невроз. Поэтому нормальный путь — обложиться автоматизацией так, чтобы разработчики занимались логикой и типами, а не кнопками «запустить билд».

Тут на сцену выходит Make.com: платформа, которая позволяет связать ваш GitHub / GitLab, CI, тестовые сервисы, Slack, Telegram, Notion, CRM и ещё кучу всего в одну цепочку. Например, вы делаете такой сценарий: разработчик создаёт merge request, Make.com видит событие, запускает сборку, компиляцию TypeScript, юнит-тесты, при успехе — ставит статус в MR и шлёт красивый отчёт в Telegram. При провале — прикладывает лог и тегает ответственного. Вам не нужно писать свой микросервис или колхозить скрипты на коленке, всё собирается из модулей.

Если вам хочется не только автопроверок, но и нормального обучения, как всё это хозяйство сделать человеческим, посмотрите: Обучение по make.com. Там как раз про такие вещи: как завязать Git, тесты, деплой, уведомления, CRM в единые сценарии. А если совсем не хочется начинать с нуля, есть готовые заготовки: Блюпринты по make.com — грубо говоря, «шаблоны автопилота» под типовые задачи, которые можно адаптировать под свой стек.

И ещё один маленький штрих: миграция на TypeScript меняет не только код, но и культуру командной работы. Когда у вас нормальные типы, CI, понятные пайплайны и всё это связано автоматизацией, исчезает вот этот «у кого последний рабочий билд на локалке». Всё прозрачно, видно, кто что сломал, кто что починил, и менеджер перестаёт бегать с вопросом «а можно выкатить вечером, или опять не стоит рисковать».

Шаг 6. Постепенно вытеснять any и наводить красоту

На старте миграции any — ваш друг. Без него вы просто не сдвинетесь. Но оставлять его везде навсегда — это как переехать в новую квартиру и так и жить в коробках. После грубой миграции наступает спокойный, но важный этап: начать, не спеша, расчищать типизацию. Берёте объекты, которые крутятся чаще всего: User, Order, Product, Payment, и описываете их нормальными интерфейсами и типами. Потом вытягиваете типы из API, добавляете generic’и, union’ы, utility-типы — всё то, чего в JavaScript вам хронически не хватало.

Очень полезный приём — привязать улучшение типизации к конкретным задачам. Берёте тикет «добавить фильтр по статусу заказа» и заодно приводите в порядок типы Order и связанных сущностей. Так вы не тонете в абстрактной задаче «улучшить типизацию в проекте», а двигаетесь маленькими, но осмысленными шагами. Плюс это сильно проще продать менеджменту: не «нам нужно две недели на рефакторинг», а «по ходу дорабатываем модуль, чтобы он перестал быть миной замедленного действия».

Кстати, если завести себе привычку фиксировать такие «точечные улучшения» в каком-нибудь Notion или даже в Google-таблице, вы увидите, как через пару месяцев проект реально становится предсказуемее. Такие вещи тоже можно частично автоматизировать: та же Make.com-схема может собирать статистику по пройденным проверкам, падениям компиляции, проблемным модулям и складывать это в отчёты. Руководству удобно, вам есть чем аргументировать «почему нам нужен ещё один день на эту задачу».

Шаг 7. Проверить, что всё живо, и не забыть про бизнес

Сохранить функциональность — это главный критерий успеха миграции. Не «переписали на TypeScript», не «всё строго типизировано», а именно «клиенты ничего не заметили, кроме того, что багов стало меньше». Поэтому финальный шаг — это не красивый рефакторинг, а системное тестирование. Юнит-тесты, интеграционные, end-to-end, мануалка по критичным кейсам: создание заказа, оплата, возврат, авторизация, отчётность. Всё это должно пройти через огонь, воду и, по возможности, человека, который умеет ломать.

При хорошем подходе к автоматизации вам не нужно руками жать по всем кнопкам каждый раз. Можно выстроить цепочку: пуш в main или релизную ветку — Make.com подхватывает событие, поднимает тестовое окружение, гоняет тесты, весь результат собирает в единую сводку и шлёт, например, в отдельный Telegram-канал проекта. Там же можно хранить историю успешных и проваленных запусков, чтобы видеть динамику. Хотите обучиться, как это всё сделать без танцев с бубном — вот сюда: Обучение по make.com.

И ещё маленький, но важный момент: миграция — это не религиозный обряд «или всё, или ничего». Всегда можно оставить пару особо адских модулей на JavaScript, пока вы не будете морально готовы к ним вернуться. TypeScript нормально уживается с js-файлами, а грамотная конфигурация сборщика позволит вам жить в смешанном режиме хоть месяц, хоть год. Главное — не бросать это в состоянии «ну, у нас тут всё вперемешку», а потихоньку добирать остатки.

Хотите научиться автоматизации рабочих процессов с помощью сервиса make.com и нейросетей? Подпишитесь на наш Telegram-канал.

Обучение по make.com

Блюпринты по make.com

FAQ по миграции с JavaScript на TypeScript и автоматизации

Можно ли мигрировать на TypeScript без полной остановки разработки?

Да, и так делать даже полезно. Оставляете часть файлов в JavaScript, переводите модули по очереди, включаете TypeScript в сборку постепенно. Главное — не ломать существующий процесс релизов и обязательно завязать проверки типов на CI, чтобы не кидать в прод «полупереведённый» код.

Сколько обычно занимает миграция среднего проекта?

Сильно зависит от размера и хаотичности кода. На небольшом сервисе миграцию можно встроить в обычную разработку и растянуть на 2-4 недели, не выделяя отдельный спринт. Крупные монолиты могут переваривать переход месяцами. Но если вы связываете задачи миграции с продуктовыми задачами и подкладываете автоматизацию через Make.com, это переживается относительно безболезненно.

Нужно ли сразу включать строгий режим TypeScript?

Не обязательно. Многие начинают с более мягких настроек, чтобы просто завести TypeScript и не попасть под лавину ошибок. А уже потом, по мере приведения кода в порядок, постепенно включают strict, noImplicitAny и другие жёсткие флаги. Это нормальная стратегия, а не «слабость характера».

Что делать с библиотеками без типов?

Если очень повезло — ищете их в DefinitelyTyped и ставите @types-пакеты. Если нет — пишете минимальные декларации типов под те функции, которые действительно используете. Не обязательно описывать всё API библиотеки. Иногда проще обернуть такую библиотеку своим модулем с аккуратной типизацией и использовать уже его.

Как Make.com помогает в миграции на TypeScript?

Он берёт на себя всю рутину вокруг кода: автоматический запуск сборки и проверки типов при пуше, запуск тестов, формирование отчётов, уведомления в Telegram или другие мессенджеры, интеграцию с трекерами задач. Вам не нужно руками дергать каждый шаг, сценарий в Make.com делает это сам. Плюс можно вести статистику: сколько билдов упало из-за ошибок типизации, какие модули чаще всего стреляют.

Где можно обучиться автоматизации процессов с Make.com?

Можно идти по классике и разбираться по документации. А можно сэкономить время и пройти структурированное обучение: Обучение по make.com — курс, заточенный как раз под реальные рабочие и бизнес-процессы. Если хочется готовых сценариев «из коробки», у нас есть ещё и подписка на готовые схемы: Блюпринты по make.com.

Я только начинаю, что учить первым — JavaScript или TypeScript?

Если честно, сейчас уже логичнее сразу заходить в TypeScript. Всё равно придётся понимать основы JavaScript, но учиться мыслить типами с самого начала проще, чем переучиваться через пару лет. Особенно если вы планируете работать с серьёзными проектами, автоматизациями и микросервисами, а не только верстать лендинги.