Разработка фронтенда на TypeScript для 1С-Битрикс

Битрикс-проект с каталогом на 50 000 товаров — это постоянная борьба с несоответствием типов. При передаче данных из PHP в JavaScript часто всплывают баги: undefined is not an object, неправильные типы цен, слетевшие фильтры. Мы регулярно сталкивались с этим на проектах любой сложности. TypeScript закрывает эту проблему: статическая типизация ловит ошибки на этапе компиляции, а не в браузере пользователя. Опыт нашей команды — 8 лет в Битрикс и более 50 реализованных проектов с TypeScript-архитектурой. Результат: снижение стоимости багфикса на 30–50% и сокращение времени на отладку интеграций. На одном проекте экономия на багфиксах составила существенную сумму за первый год после миграции.

Почему TypeScript, а не ванильный JavaScript для Битрикс?

Согласно TypeScript Handbook (на Wikipedia), статическая типизация предотвращает до 15% ошибок на этапе компиляции. В контексте Битрикс это критично: неверный тип цены или ID товара может привести к падению корзины. На одном из проектов с каталогом на 100 000 товаров мы полностью устранили баги фильтрации после перехода на строгую типизацию. TypeScript-фронтенд в 2–3 раза надёжнее аналогичного решения на чистом JS: ошибки типов, некорректная передача данных между PHP и JS, проблемы с кэшированием — всё это выявляется до выкладки в продакшн.

Как происходит интеграция TypeScript с PHP-компонентами?

Мы используем пошаговый подход, чтобы минимизировать простои:

• Аудит текущего JS-кода: выявляем несоответствия типов, глобальные переменные, слабые места.
• Проектирование типов для всех точек интеграции с PHP (инфоблоки, REST, компоненты).
• Настройка сборщика Vite или Webpack с поддержкой TypeScript.
• Разработка компонентов с полной типизацией — каталог, корзина, фильтр.
• Тестирование и деплой с гарантией стабильности.

Архитектура TypeScript в шаблоне Битрикс

Два основных подхода, которые мы применяем:

Большинство наших проектов используют первый подход с элементами второго в самых интерактивных частях (каталог, корзина, личный кабинет).

/local/templates/my_site/ ├── src/ │ ├── components/ │ │ ├── catalog/ │ │ │ ├── CatalogFilter.ts │ │ │ ├── ProductCard.ts │ │ │ └── CartButton.ts │ │ ├── cart/ │ │ │ ├── CartDrawer.ts │ │ │ └── CartCounter.ts │ │ └── common/ │ │ ├── Modal.ts │ │ └── Tooltip.ts │ ├── api/ │ │ ├── catalog.ts │ │ ├── cart.ts │ │ └── user.ts │ ├── types/ │ │ ├── bitrix.d.ts │ │ └── api.ts │ ├── utils/ │ │ ├── http.ts │ │ └── format.ts │ └── main.ts ├── dist/ ├── package.json ├── tsconfig.json └── vite.config.ts 

Компонент корзины на TypeScript

Пример типизированного компонента добавления в корзину:

// api/cart.ts interface CartItem { id: number; name: string; price: number; quantity: number; img: string | null; } interface CartState { items: CartItem[]; totalPrice: number; totalCount: number; currency: string; } interface AddToCartPayload { productId: number; quantity: number; properties?: Record<string, string>; } export async function addToCart(payload: AddToCartPayload): Promise<CartState> { const formData = new FormData(); formData.append('sessid', BX.bitrix_sessid()); formData.append('action', 'addItem'); formData.append('product_id', String(payload.productId)); formData.append('quantity', String(payload.quantity)); if (payload.properties) { Object.entries(payload.properties).forEach(([k, v]) => { formData.append(`props[${k}]`, v); }); } const res = await fetch('/local/ajax/cart.php', { method: 'POST', body: formData, }); if (!res.ok) throw new Error(`Cart error: ${res.status}`); const json = await res.json(); if (json.status !== 'success') throw new Error(json.error ?? 'Cart error'); return json.cart as CartState; } 

Интеграция с PHP-компонентами через data-атрибуты

Передача данных из шаблона в TypeScript без глобальных переменных:

// template.php компонента каталога <div id="catalog-app" data-section-id="<?= (int)$arResult['SECTION']['ID'] ?>" data-iblock-id="<?= (int)$arParams['IBLOCK_ID'] ?>" data-initial-filter='<?= htmlspecialchars( json_encode($arResult['FILTER_PARAMS']), ENT_QUOTES ) ?>' > <?php // SSR-вёрстка для первой загрузки ?> </div> 

// TypeScript читает данные типизированно const appEl = document.getElementById('catalog-app'); if (!appEl) throw new Error('#catalog-app not found'); const sectionId = Number(appEl.dataset['sectionId']); const iblockId = Number(appEl.dataset['iblockId']); const rawFilter = appEl.dataset['initialFilter'] ?? '{}'; const initFilter = JSON.parse(rawFilter) as FilterState; 

Как Vite ускоряет сборку TypeScript-фронтенда?

Для многомодульных проектов используем Vite — он даёт быструю сборку и разделение точек входа.

// vite.config.ts import { defineConfig } from 'vite'; export default defineConfig({ root: 'src', build: { outDir: '../dist', emptyOutDir: true, rollupOptions: { input: { main: 'src/main.ts', catalog: 'src/pages/catalog.ts', cart: 'src/pages/cart.ts', }, }, }, resolve: { alias: { '@': '/src' }, }, }); 

Отдельные entrypoint для каждого раздела сайта — только нужный JavaScript загружается на странице, что улучшает скорость загрузки.

Реальный кейс: каталог на 100 000 товаров

Наш клиент — интернет-магазин с каталогом на 100 000 позиций. Продукт: динамические фильтры, корзина с множеством опций, интеграция с 1С через CommerceML. Исходный код на ванильном JS страдал от ошибок типов при обмене с 1С. Мы провели аудит, спроектировали типы для всех сущностей и мигрировали фронтенд на TypeScript за три недели. Результат: количество ошибок в корзине снизилось на 60%, время загрузки фильтров — на 30%. Клиент получил гарантию стабильности на следующие два года, а экономия на багфиксах составила значительную сумму за первый год.

Что входит в нашу работу по разработке TypeScript-фронтенда

• Аудит текущей архитектуры: выявление проблем в JS-коде, оценка объёма миграции.
• Настройка TypeScript + сборщик (Vite/Webpack) с учётом окружения Битрикс.
• Создание типов для всех точек интеграции с PHP (инфоблоки, REST, компоненты).
• Разработка новых компонентов (каталог, корзина, фильтр, личный кабинет) с полной типизацией.
• Миграция существующего кода с ванильного JS на TypeScript с сохранением функциональности.
• Документация по архитектуре и описание типов.
• Тестирование и отладка в продакшне с гарантией стабильности.

Ориентировочные сроки

Точные сроки и стоимость рассчитываются индивидуально после знакомства с проектом. Закажите аудит вашего проекта — мы проанализируем ваш код и предложим оптимальное решение. Получите консультацию, чтобы понять, как TypeScript сократит ваши издержки на поддержку фронтенда.