Битрикс-проект с каталогом на 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 в шаблоне Битрикс
Два основных подхода, которые мы применяем:
| Подход | Описание | Когда выбирать |
|---|---|---|
| MPA с TypeScript-модулями | Классическая генерация страниц на PHP, JavaScript — островки интерактивности. Каждый компонент — изолированный модуль с собственными типами. | Проекты среднего размера, где SEO и скорость первой загрузки критичны. |
| SPA/Headless | React или Vue на TypeScript полностью управляют UI, Битрикс выступает как API (REST/GraphQL). | Сложные пользовательские интерфейсы: кабинет клиента, CRM-виджеты, многошаговые формы. |
Большинство наших проектов используют первый подход с элементами второго в самых интерактивных частях (каталог, корзина, личный кабинет).
Пример структуры компонентов
/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 с сохранением функциональности.
- Документация по архитектуре и описание типов.
- Тестирование и отладка в продакшне с гарантией стабильности.
Ориентировочные сроки
| Этап | Сроки |
|---|---|
| Аудит и проектирование архитектуры | 1–2 дня |
| Настройка инфраструктуры TypeScript + Vite | 1 день |
| Разработка компонентов каталога (фильтр, список, карточка) | 3–5 дней |
| Разработка корзины и мини-корзины в шапке | 2–3 дня |
| Миграция существующего JS-кода (зависит от объёма) | 2–5 дней |
| Тестирование и деплой | 1–2 дня |
Точные сроки и стоимость рассчитываются индивидуально после знакомства с проектом. Закажите аудит вашего проекта — мы проанализируем ваш код и предложим оптимальное решение. Получите консультацию, чтобы понять, как TypeScript сократит ваши издержки на поддержку фронтенда.