TypeScript Academy · درس

شرح مراجع مشاريع TypeScript

استخدموا إعدادات composite وreferences للبنيات متعددة الحزم

شرح مراجع مشاريع TypeScript درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ما مراجع المشاريع؟

تتيح مراجع المشاريع تقسيم قاعدة شيفرة TypeScript إلى عدة مشاريع tsconfig يعلن كل منها عن تبعياته على المشاريع الأخرى، مما يتيح عمليات بناء تدريجية ومعزولة.

// tsconfig.json (root)
{
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/ui" }
  ]
}

المشاريع المركبة

يجب أن يحتوي كل مشروع مشار إليه على "composite": true في tsconfig الخاص به. يتيح ذلك تخزين الإعلانات مؤقتًا وتتبع التبعيات.

// packages/core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "./dist"
  }
}

البناء باستخدام tsc --build

شغّل tsc --build (أو tsc -b) من الجذر لبناء جميع المشاريع المشار إليها وفق ترتيب التبعيات.

# Build all projects
tsc --build

# Build and watch
tsc --build --watch

# Clean build outputs
tsc --build --clean

إعادة البناء التدريجية

بعد عملية البناء الأولى، يعيد tsc --build ترجمة المشاريع التي تغيرت ملفات مصدرها أو تبعياتها فقط، مما يسرّع المستودعات الكبيرة بدرجة كبيرة.

# Only changed packages are rebuilt
tsc --build
# Output: 2/5 projects up to date — skipping

استهلاك ملفات الإعلانات

يستهلك المشروع المشار إليه تبعياته عبر ملفات .d.ts المُنشأة في dist/، بدلًا من إعادة تحليل ملفات TypeScript المصدرية.

// packages/ui imports from packages/core
import { Button } from "@myapp/core"; // resolved via dist/index.d.ts

إعداد المسارات

اضبط paths في tsconfig الجذر أو استخدم exports في package.json حتى يحل TypeScript استيرادات الحزم بشكل صحيح أثناء التطوير.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"]
    }
  }
}

الحفاظ على ترتيب البناء

يحدد TypeScript ترتيب البناء تلقائيًا من مخطط المراجع. ويكتشف المراجع الدائرية ويبلغ عنها كأخطاء.

// Circular reference error example:
// packages/core references packages/ui
// packages/ui references packages/core
// Error: Circular project reference

outDir و rootDir

ينبغي ضبط outDir وrootDir في كل مشروع مركب للتحكم في تخطيط المخرجات ومنع تسرّب الملفات عبر حدود الحزم.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

التكامل مع أدوات البناء

تتكامل Turborepo وNx وLerna مع مراجع المشاريع لتخزين عمليات البناء مؤقتًا وتنفيذها بالتوازي استنادًا إلى مخطط التبعيات.

// turbo.json — declare TypeScript build as a pipeline step
{
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }
  }
}

مراقبة مشاريع متعددة

يراقب tsc --build --watch جميع المشاريع المشار إليها ويعيد ترجمتها تدريجيًا عند كل تغيير، مما يوفر ملاحظات شبه فورية في المستودعات متعددة الحزم.

# Terminal: tsc --build --watch
# [9:00:01 AM] Found 0 errors. Watching for file changes.

مراجعة: مراجع المشاريع

تقسم مراجع المشاريع TypeScript إلى وحدات بناء معزولة وقابلة للتخزين المؤقت. اضبط composite: true، وصرّح عن references، واستخدم tsc --build لعمليات بناء تدريجية سريعة وصحيحة في المستودعات متعددة الحزم.

تحقق سريع

ما خيار tsconfig المطلوب لكي يمكن لمشروع آخر الإشارة إلى مشروع؟

ما تعلمته

تتيح مراجع مشاريع TypeScript عمليات بناء سريعة ومعزولة في المستودعات متعددة الحزم. اضبط composite: true، وصرّح عن التبعيات باستخدام references، وابنِ باستخدام tsc --build لإجراء ترجمة تدريجية.

الأسئلة الشائعة

هل درس «شرح مراجع مشاريع TypeScript» مجاني؟

نعم — نص درس «شرح مراجع مشاريع TypeScript» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «شرح مراجع مشاريع TypeScript»؟

استخدموا إعدادات composite وreferences للبنيات متعددة الحزم تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «شرح مراجع مشاريع TypeScript»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

شرح مراجع مشاريع TypeScript
مساحات عمل pnpm مع TypeScript
استراتيجية حزمة الأنواع المشتركة
البنيات التزايدية والتخزين المؤقت في المستودعات متعددة الحزم

← العودة إلى TypeScript Academy