Frontend Academy · درس

ترجمة TS وtsconfig.json

شغّل tsc لترجمة TypeScript، واضبط المترجم باستخدام خيارات tsconfig.json مثل strict وtarget وoutDir.

الدرس 4 من 413 خطوة

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

تثبيت مترجم TypeScript

ثبّتوا TypeScript باعتباره تبعية للتطوير. تترجم واجهة سطر الأوامر tsc ملفات TypeScript. ومع Vite أو Next.js، يتولى نظام التجميع الترجمة، لكن tsc يُستخدم أيضًا للتحقق من الأنواع.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

تهيئة tsconfig.json

شغّلوا npx tsc --init لإنشاء tsconfig.json مع جعل جميع الخيارات في صورة تعليقات وتوفير قيم افتراضية منطقية. هذا الملف هو ملف الإعداد الوحيد لمترجم TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

بنية tsconfig.json

الأقسام الرئيسية هي: compilerOptions (سلوك المترجم)، وinclude (الملفات التي ستُترجم)، وexclude (الملفات التي يجب تخطيها).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — إصدار JavaScript الناتج

يحدد target إصدار JavaScript الذي ينتجه tsc. استخدموا ES2022 أو ESNext للبيئات الحديثة. واستخدموا ES5 لتحقيق أقصى توافق، مع أن Babel يتولى ذلك عادةً.

module — نظام الوحدات

يتحكم module في تنسيق الوحدات الناتجة. استخدموا CommonJS مع Node.js. واستخدموا ESNext أو ES2022 مع أنظمة التجميع مثل Vite وwebpack. أما NodeNext فمخصص لـ Node.js الحديث مع type:module في package.json.

strict — خيار الصرامة

يفعّل "strict": true مجموعةً من عمليات التحقق الصارمة، مثل strictNullChecks وnoImplicitAny وstrictFunctionTypes وغيرها. فعّلوه دائمًا في المشاريع الجديدة؛ فهو يكتشف معظم الأخطاء.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — التخلص من أخطاء null

عند تفعيل strictNullChecks، لا يمكن إسناد null وundefined إلى أنواع أخرى إلا إذا أُدرجا صراحةً في اتحاد. وهذا يجبركم على معالجة حالات null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir وrootDir

يحدد outDir مكان وضع ملفات JavaScript المترجمة. ويحدد rootDir جذر ملفات TypeScript المصدرية. ويعملان معًا على محاكاة بنية المصدر داخل dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — الأسماء المستعارة للوحدات

اضبطوا الأسماء المستعارة للمسارات باستخدام الخيار paths (وbaseUrl). ويتيح ذلك استيراد @/components/Button بدلًا من ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

وضع المراقبة والتحقق من الأنواع فقط

يعيد tsc --watch الترجمة عند تغيير الملفات. ويجري tsc --noEmit التحقق من الأنواع من دون إخراج ملفات، وهو مفيد في CI للتحقق من الأنواع من دون تكرار مهمة نظام التجميع.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

توسيع tsconfig.json

استخدموا extends للتوارث من إعداد أساسي. وتوفر الإعدادات الأساسية المشتركة، مثل @tsconfig/strictest، أفضل الممارسات التي يتبناها المجتمع.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

تحقق سريع

أي خيار في tsconfig يفعّل مجموعة عمليات التحقق الصارمة الكاملة من الأنواع؟

أجب عليها في الدرس التفاعلي

خلاصة: tsconfig.json

يترجم tsc شيفرة TypeScript إلى JavaScript. ويتحكم tsconfig.json في target (إصدار ES الناتج) وmodule (نظام الوحدات) وoutDir وstrict وpaths. ويكتشف strict: true معظم الأخطاء. استخدموا --noEmit في CI لإجراء التحقق من الأنواع فقط. ووسّعوا الإعدادات الأساسية التي يوفرها المجتمع للاستفادة من أفضل الممارسات.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «ترجمة TS وtsconfig.json» مجاني؟

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

ماذا ستتعلم في «ترجمة TS وtsconfig.json»؟

شغّل tsc لترجمة TypeScript، واضبط المترجم باستخدام خيارات tsconfig.json مثل strict وtarget وoutDir. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «ترجمة TS وtsconfig.json»؟

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

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

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

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

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