0Pricing
TypeScript Academy · درس

ترجمة TypeScript إلى JavaScript

افهم مُصرّف TypeScript ومخرجاته

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

مرحبًا

لا يمكن تشغيل TypeScript مباشرةً في Node.js أو المتصفح. يجب ترجمتها أولًا إلى JavaScript. في هذا الدرس ستتعلم كيفية عمل مترجم TypeScript.

تثبيت مترجم TypeScript

ثبّت TypeScript باعتبارها اعتمادًا للتطوير في مشروعك. ويصبح الأمر `tsc` متاحًا في البرامج النصية المحلية بعد التثبيت.
npm install --save-dev typescript
npx tsc --version

أول عملية ترجمة باستخدام tsc

شغّل `tsc hello.ts` لترجمة ملف واحد. وينتج الملف `hello.js` في الدليل نفسه بعد إزالة جميع الأنواع.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: إعدادات المشروع

تحتاج إلى `tsconfig.json` في المشروع الحقيقي. شغّل `tsc --init` لإنشاء ملف إعدادات. فهو يتحكم في الهدف، وتنسيق الوحدات، ودرجة الصرامة، ودليل المخرجات، وغير ذلك.
npx tsc --init
// Creates tsconfig.json with defaults and comments

خيارات tsconfig الأساسية

أهم حقول tsconfig هي target (إصدار ES الناتج)، وmodule (نظام الوحدات)، وoutDir (مجلد المخرجات)، وstrict (تفعيل جميع الفحوصات الصارمة).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

وضع المراقبة باستخدام tsc --watch

شغّل `tsc --watch` لإعادة الترجمة تلقائيًا عند حفظ ملف TypeScript. ويسرّع ذلك دورة التطوير.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: التحقق من الأنواع من دون إنتاج ملفات

يشغّل الخيار `noEmit` مدقّق الأنواع من دون كتابة أي ملفات مخرجات. وهذا مفيد في مسارات CI التي تستخدم أداة تجميع مثل Vite أو esbuild للترجمة الفعلية.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

بدائل أسرع: ts-node وtsx

يمكنك أثناء التطوير تشغيل TypeScript مباشرةً من دون خطوة ترجمة منفصلة باستخدام `ts-node` أو الأداة الأسرع `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

خرائط المصدر لتصحيح الأخطاء

فعّل `sourceMap: true` لكي تربط أدوات المطور في المتصفح ومصححات أخطاء Node.js أسطر JavaScript المترجمة بشيفرة TypeScript المصدرية الأصلية.
{ "compilerOptions": { "sourceMap": true } }

ملفات التصريح (.d.ts)

باستخدام `declaration: true`، يُصدر المترجم أيضًا ملفات `.d.ts`. وتتيح هذه الملفات لمشاريع TypeScript الأخرى استخدام مكتبتك مع معلومات الأنواع كاملةً.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

أخطاء المترجم تمنع المخرجات افتراضيًا

افتراضيًا، إذا احتوت TypeScript على أخطاء في الأنواع، فإن `tsc` يظل يُصدر JavaScript لكنه ينتهي برمز خروج غير صفري. استخدم `noEmitOnError: true` لإيقاف الإخراج عند وجود أخطاء.
{ "compilerOptions": { "noEmitOnError": true } }

تحقق سريع

ما الذي يحققه تشغيل `tsc --noEmit`؟

مراجعة

يحوّل مترجم TypeScript ملفات .ts إلى JavaScript. اضبطه باستخدام tsconfig.json، واستخدم --watch أثناء التطوير، و--noEmit للتحقق من الأنواع فقط، وts-node/tsx لتشغيل TypeScript مباشرةً.

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

هل درس «ترجمة TypeScript إلى JavaScript» مجاني؟

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

ماذا ستتعلم في «ترجمة TypeScript إلى JavaScript»؟

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

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

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

كم من الوقت يستغرق درس «ترجمة TypeScript إلى JavaScript»؟

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

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

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

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

  1. نقاط الضعف في JavaScript: أخطاء وقت التشغيل
  2. ما الذي تضيفه TypeScript إلى JavaScript
  3. ترجمة TypeScript إلى JavaScript
  4. متى تستخدم TypeScript في مشاريعك
← العودة إلى TypeScript Academy