TypeScript עבור 1C-Bitrix: פיתוח טיפוסי

Vite הוא bundler מודרני שמהיר משמעותית מ-Webpack. עבור ביטריקס, מספיקה הגדרה מינימלית: ציון נקודת הכניסה ותיקיית הפלט. Vite תומך אוטומטית ב-TypeScript, בפרה-מעבדי CSS, וב-hot-reload במהלך הפיתוח. דוגמה /local/modules/mymodule/ install/ js/ src/ <- TypeScript-исходники index.ts dist/ <- скомпилированный JS package.json tsconfig.json :

import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    outDir: './dist',
    rollupOptions: {
      input: './src/ts/index.ts',
    },
  },
});

ב-build לייצור, אנו מקבלים JS ממוזער שנכלל בתבנית.

איך לתאר טיפוסים לנתונים מביטריקס?

פרויקט: חנות מקוונת עם קטלוג של 50,000 מוצרים. אינטגרציה עם 1C דרך CommerceML. נתונים מגיעים מהבקאנד של PHP דרך AJAX. בעבר, נעשה שימוש ב-JS פשוט — כל שינוי במבנה שבר את הפרונטאנד. יישמנו TypeScript ותיארנו טיפוסים לכל הישויות.

טיפוסים לקטלוג

// types/bitrix.ts
export interface BitrixProduct {
  ID: string;
  NAME: string;
  DETAIL_PAGE_URL: string;
  PREVIEW_PICTURE: string | null;
  CATALOG_PRICE_1: string | null;
  CATALOG_CURRENCY_1: string;
  PROPERTY_BRAND_VALUE: string | null;
  PROPERTY_ARTICLE_VALUE: string | null;
}

export interface BitrixCatalogResult {
  ITEMS: BitrixProduct[];
  TOTAL_ITEMS_COUNT: number;
  PAGES_COUNT: number;
  CURRENT_PAGE: number;
}

export interface BitrixAjaxResponse<T = unknown> {
  status: 'success' | 'error';
  data: T;
  errors?: BitrixError[];
}

export interface BitrixError {
  code: string;
  message: string;
  customData?: string;
}

חשוב: ביטריקס מחזירה מזהים מספריים כמחרוזות — { "compilerOptions": { "target": "ES2020", "module": "ESNext", "moduleResolution": "bundler", "strict": true, "noUncheckedIndexedAccess": true, "lib": ["ES2020", "DOM"], "outDir": "./dist", "sourceMap": true, "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*.ts"], "exclude": ["node_modules", "dist"] } . זה בא לידי ביטוי בטיפוס. כמו כן, כל השדות האופציונליים מסומנים במפורש עם noUncheckedIndexedAccess: true.

פונקציית AJAX עם טיפוסים

// api/catalog.ts
import type { BitrixAjaxResponse, BitrixCatalogResult } from '@/types/bitrix';

export async function fetchCatalogItems(
  sectionId: number,
  page: number,
  filter: Record<string, string[]>,
): Promise<BitrixCatalogResult> {
  const params = new URLSearchParams({
    SECTION_ID: String(sectionId),
    PAGE_NUM: String(page),
    sessid: BX.bitrix_sessid(),
    action: 'getCatalogItems',
  });

  Object.entries(filter).forEach(([key, values]) => {
    values.forEach(val => params.append(`filter[${key}][]`, val));
  });

  const response = await fetch('/local/ajax/catalog.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: params.toString(),
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  const json: BitrixAjaxResponse<BitrixCatalogResult> = await response.json();

  if (json.status !== 'success') {
    throw new Error(json.errors?.[0]?.message ?? 'Unknown error');
  }

  return json.data;
}

vite.config.ts — מתודה של ליבת ביטריקס. כדי להשתמש בה, יש להצהיר על הטיפוס הגלובלי import { defineConfig } from 'vite'; export default defineConfig({ build: { outDir: './dist', rollupOptions: { input: './src/ts/index.ts', }, }, }); .

טיפוס BX גלובלי

// types/globals.d.ts
declare global {
  const BX: {
    bitrix_sessid(): string;
    message(params: Record<string, string>): void;
    bind(el: Element, event: string, fn: (e: Event) => void): void;
  };
}
export {};

מה כלול בפיתוח TypeScript עבור ביטריקס?

• הגדרת סביבה (Node.js, Vite, tsconfig).
• תיאורי טיפוסים לישויות הפרויקט שלך (מוצרים, הזמנות, משתמשים, הגדרות).
• המרת קוד JS קיים תוך שמירה על הפונקציונליות.
• אינטגרציה עם רכיבי AJAX של ביטריקס.
• הגדרת CI/CD לבנייה אוטומטית.
• תיעוד של מבנה הטיפוסים והבנייה.
• הבטחת תאימות לאחור: לאחר היישום, קוד PHP ישן אינו דורש שינויים.

תהליך העבודה: מאודיט ועד פריסה

1. אודיט של קוד JS קיים (כמה שורות, אילו אינטגרציות, אילו שגיאות בלוגים).
2. עיצוב ארכיטקטורת טיפוסים (ממשקים לכל הישויות).
3. הגדרת build (Vite, tsconfig, paths).
4. יישום בשלבים: תחילה פונקציות קריטיות (סל קניות, קטלוג), לאחר מכן השאר.
5. בדיקות: בדיקת טיפוסים, בדיקות יחידה לקריאות AJAX מרכזיות.
6. פריסה: קומפילציה לייצור, החלפת סקריפטים, ניטור שגיאות.

קבלו ייעוץ על יישום TypeScript — נעריך את הפרויקט שלכם. צרו קשר כדי לדון בפרטים.

השוואה בין JavaScript ל-TypeScript עבור ביטריקס

לוחות זמנים ואיך להעריך פרויקט

לוחות הזמנים נעים בין יום אחד (הגדרה בסיסית) ל-3 שבועות (כיסוי מלא של פרויקט גדול). העלות מחושבת באופן אישי לאחר ניתוח מורכבות הקוד ומספר המודולים. כתבו לנו — נערוך אודיט ונציע תוכנית אופטימלית.

למה ליישם TypeScript עכשיו?

• הפחתה בזמן הדיבוג ב-30% בהתבסס על ניסיון הפרויקטים שלנו.
• השתלבות קלה יותר למפתחים חדשים — הטיפוסים משמשים כתיעוד.
• יציבות מוגברת: שגיאות קריטיות לא מגיעות לסביבת הייצור.
• יכולת להשתמש בכלים מודרניים (Zod, React) באקוסיסטם של ביטריקס.

הצוות שלנו הוא מומחי 1C-Bitrix מוסמכים עם ניסיון של למעלה מ-10 שנים. יישמנו TypeScript ביותר מ-50 פרויקטים. צרו קשר כדי לדון בפרויקט שלכם — נעריך את ההיקף ונציע צעדים קונקרטיים.