Технология · Язык
Разработка на TypeScript
Шесть запущенных сайтов, ни одного на чистом JavaScript: TypeScript — стандарт, а не доплата, потому что сломанный проп дешевле поймать на компиляции, чем в продакшне.
продакшн-сайтов, полностью написанных на TypeScript — от маркетинговых сайтов до трёхъязычной оплаты в SaaS
Каждый Next.js-сайт, который мы запустили — Aurea Sky Tower, Bloom & Bowl, Osvita Poland, Astrooly, Oceania и сайт регионального юридического бюро — целиком на TypeScript. На Astrooly это означало, что логика цен Stripe, типы многоязычного контента и модель атрибуции рефералов делили строгие типы по всему коду — несовпадающее поле между логикой тарифной зоны и интерфейсом оплаты ломает сборку, а не уходит в продакшн незаметным багом к платящему клиенту.
Когда нужен TypeScript
TypeScript — это не предпочтение, за которое мы берём доплату, а стандарт для любого проекта с реальной логикой, потому что цена ошибки типов зависит от того, где её поймали. На этапе компиляции — это красное подчёркивание. В продакшне — это тикет в поддержку, а то и незаметно неправильная цена, показанная клиенту.
Это особенно важно в проектах с общими структурами данных на многих поверхностях. Логика цен Astrooly затрагивает геолокационный запрос, создание сессии Stripe, интерфейс оплаты и расчёт реферальной комиссии — четыре разных места, которым нужно договориться о том, как выглядит объект «тарифная зона». TypeScript делает это соглашение обязательным, а не просто задокументированным в комментарии, который однажды забудут обновить.
Та же дисциплина применяется и на небольших сайтах. Контент покупательского пути Aurea Sky Tower — количество этажей, статистика по юнитам, тексты секций — типизирован так же, как платёжная логика Astrooly, просто со ставками пониже. Один язык, один уровень строгости, независимо от масштаба проекта.
Что мы строим на TypeScript
Строго типизированные модели данных
Общие интерфейсы для контента, цен и ответов API, которые держат логику фронтенда и бэкенда в согласии, отлавливая несовпадения на этапе сборки, а не в рантайме.
Типобезопасные API-маршруты
API-маршруты Next.js с типизированными формами запросов и ответов, поэтому изменение структуры payload проявляется везде, где он используется, а не только там, где он создаётся.
Обобщённые переиспользуемые паттерны компонентов
Типизированные React-компоненты, которые обеспечивают корректное использование пропсов на растущем сайте, снижая класс багов, возникающих из-за чуть неправильного использования компонента в новом контексте.
Более безопасный рефакторинг растущих кодовых баз
По мере роста масштаба проекта — как Astrooly вырос от базовой платформы до платежей, рефералов и аналитики — компилятор TypeScript отлавливает волновые эффекты изменений, а не оставляет их на откуп одному тестированию.
Частые вопросы
- Он добавляет немного структуры на старте, но убирает целый класс багов — несовпадающие структуры данных между системами — которые иначе находят на QA или в продакшне. На проекте вроде Astrooly, где логика цен, оплаты и рефералов должна была делить общие типы, этот компромисс окупается ещё до запуска.
- На каждом. Накладные расходы на простом сайте минимальны, а главное — не возникает момента, когда растущий проект приходится задним числом переводить на типы, что гораздо более масштабная и рискованная задача, чем начать с них сразу.
- На Astrooly объект тарифной зоны читают геолокационная логика, создание сессии Stripe и расчёт реферальной комиссии. Переименованное в одном из этих мест поле без обновления остальных немедленно ломает сборку — в обычном JavaScript то же изменение проявилось бы только тогда, когда реальный пользователь попал бы на затронутый участок кода.
- Да, постепенно — TypeScript является надмножеством JavaScript, поэтому файлы можно мигрировать по одному, а не требовать полного переписывания до получения какой-либо выгоды.
Нужна кодовая база, которая сама ловит свои ошибки?
Мы пишем каждый продакшн-проект на TypeScript по умолчанию — не как доплату, а потому что это дешевле, как только в проекте больше нескольких страниц. Опишите проект — оценим объём работы.