🚀 انطلاقتك الأولى في عالم TypeScript: الدليل الشامل للبداية

أهلاً بك يا بطل في أولى خطواتك مع لغة TypeScript! إذا كنت تمتلك خلفية بسيطة عن لغة JavaScript، فأنت في المكان الصحيح. في هذا الدرس، سنضع حجر الأساس، وسنتعرف على ماهية هذه اللغة وكيف نجهز جهازنا لنبدأ بكتابة أول سطر برمجى بها. 🌟

❓ ما هي لغة TypeScript أصلاً؟

ببساطة، TypeScript هي لغة برمجة مفتوحة المصدر طورتها شركة مايكروسوفت. ولكن، لكي لا نشعر بالتعقيد، تخيل أن TypeScript هي عبارة عن "غلاف" أو "تطوير" للغة JavaScript.

لماذا نحتاجها؟ لغة JavaScript مرنة جداً، ولكن هذه المرونة قد تسبب أخطاءً يصعب اكتشافها أثناء تشغيل البرنامج. هنا تأتي TypeScript لتعطينا ميزة تسمى "الأنواع" (Types)، والتي تجعل الكود أكثر تنظيماً وتساعدنا في اكتشاف الأخطاء "قبل" أن نقوم بتشغيل الكود.

القاعدة الذهبية: كل كود JavaScript هو في الأصل كود TypeScript صحيح، ولكن ليس كل كود TypeScript يمكن تشغيله مباشرة في المتصفح. 💡

⚙️ كيف تعمل TypeScript؟ (عملية الـ Compilation)

المتصفحات (مثل Chrome و Firefox) لا تفهم لغة TypeScript بشكل مباشر؛ هي تفهم فقط لغة JavaScript. لذا، نحتاج إلى عملية تسمى Transpilation أو Compilation.

ماذا يحدث خلف الكواليس؟

  1. تكتب الكود بلغة TypeScript (بامتداد .ts).
  2. يقوم "مترجم TypeScript" (TSC) بتحويل هذا الكود إلى لغة JavaScript (بامتداد .js).
  3. يقوم المتصفح بتشغيل ملف الـ JavaScript الناتج.

🛠️ إعداد بيئة العمل (خطوة بخطوة)

لكي نبدأ البرمجة، نحتاج إلى تثبيت بعض الأدوات الأساسية على جهازنا. اتبع الخطوات التالية بدقة:

1. تثبيت Node.js 🟢

لأن مترجم TypeScript يعمل باستخدام Node.js، يجب أن يكون مثبتاً على جهازك.

  • اذهب إلى الموقع الرسمي: nodejs.org.
  • قم بتحميل نسخة LTS (وهي النسخة المستقرة والموصى بها).
  • اتبع خطوات التثبيت التقليدية (Next -> Next -> Finish).

2. تثبيت TypeScript 📦

الآن سنقوم بتثبيت المترجم (Compiler) الذي يحول الكود من TS إلى JS. افتح "موجّه الأوامر" (Command Prompt أو Terminal) واكتب الأمر التالي:

npm install -g typescript

(شرح: npm هو مدير الحزم، و -g تعني تثبيت البرنامج بشكل عالمي على الجهاز لكي تستخدمه في أي مشروع).

3. التأكد من التثبيت ✅

للتأكد من أن كل شيء يعمل بنجاح، اكتب الأمر التالي في الـ Terminal:

tsc -v

إذا ظهر لك رقم الإصدار (مثلاً Version 5.x.x)، فهذا يعني أنك جاهز للانطلاق! 🏁

✍️ كتابة وتشغيل أول كود TypeScript

لنقم بتطبيق عملي بسيط جداً. سنقوم بإنشاء ملف ونقوم بتحويله إلى JavaScript.

الخطوة 1: أنشئ مجلداً جديداً لمشروعك، وبداخله أنشئ ملفاً باسم hello.ts.

الخطوة 2: اكتب الكود التالي داخل الملف:

// تعريف متغير نصي بسيط
let greeting: string = "Hello Codex Academy!";

// طباعة النص في وحدة التحكم (Console)
console.log(greeting);

الخطوة 3: تحويل الملف إلى JavaScript. افتح الـ Terminal في مسار المجلد واكتب الأمر التالي:

tsc hello.ts

الخطوة 4: ستلاحظ ظهور ملف جديد في المجلد باسم hello.js. هذا هو الملف الذي يفهمه المتصفح أو Node.js. الآن يمكنك تشغيله باستخدام الأمر:

node hello.js

ستظهر لك النتيجة: Hello Codex Academy! 🎉

📝 ملخص سريع لما تعلمناه:

  • TypeScript هي تطوير لـ JavaScript تضيف ميزة "الأنواع".
  • الكود لا يعمل مباشرة في المتصفح، بل يجب تحويله عبر المترجم TSC.
  • قمنا بتثبيت Node.js ثم تثبيت TypeScript عالمياً.
  • تعلمنا كيف نحول ملف .ts إلى .js ونقوم بتشغيله.

⏭️ ماذا سنتعلم في الدرس القادم؟

الآن بعد أن جهزنا بيئة العمل، حان الوقت لندخل في صلب اللغة. في الدرس القادم سنبدأ بشرح "الأنواع الأساسية" (Basic Types)، حيث سنتعرف على كيفية تعريف النصوص، الأرقام، والقيم المنطقية، وكيف تمنعنا TypeScript من ارتكاب أخطاء برمجية قاتلة! 💻