02- إعداد بيئة التطوير وتثبيت TypeScript

أهلاً بك في الخطوة العملية الأولى في رحلتنا مع TypeScript، في دورتنا النصية المكتوبة بدقة لتعلم واتقان TypeScript من الصفر. 

قبل أن نبدأ في كتابة الأكواد البرمجية الرائعة، نحتاج أولاً إلى تجهيز "ورشة العمل" الخاصة بنا.

تخيل أنك نجار تريد بناء قطعة أثاث جميلة. هل يمكنك البدء مباشرة بقطعة خشب خام؟ بالطبع لا. ستحتاج إلى طاولة عمل، منشار، مطرقة، مسامير، وأدوات قياس. كل أداة لها دور محدد، ووجودها جميعًا في مكان واحد ومرتب يجعل عملك أسهل وأكثر كفاءة ودقة.

في عالم البرمجة، تُسمى ورشة العمل هذه "بيئة التطوير (Development Environment)".

إنها مجموعة الأدوات والبرامج التي نحتاجها على حاسوبنا لكتابة، اختبار، وتشغيل الأكواد البرمجية.

إعداد هذه البيئة بشكل صحيح هو خطوة حاسمة لضمان تجربة تعلم سلسة وخالية من المشاكل التقنية المحبطة.

في هذا القسم، سنقوم بتجهيز ورشتنا خطوة بخطوة، تمامًا مثلما يجهز الحرفي أدواته.

سنتعلم كيفية تثبيت كل قطعة أساسية، وسنفهم دورها وأهميتها.

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

الأدوات التي سنقوم بتثبيتها هي:

1. Node.js و npm: المحرك الذي يسمح لنا بتشغيل أدوات التطوير، ومدير الحزم الذي يجلب لنا هذه الأدوات.
2. محرر الأكواد (Code Editor): مساحة العمل التي سنكتب فيها أكوادنا، وسنختار Visual Studio Code.
3. TypeScript: الأداة الرئيسية نفسها التي سنستخدمها لبناء تطبيقاتنا.

هيا بنا نبدأ في بناء أساس متين لرحلتك البرمجية!

الجزء الأول: الأساس - تثبيت Node.js و npm

قبل أن نتحدث عن TypeScript، نحتاج إلى تثبيت أداة جوهرية تسمى Node.js.

قد يبدو الأمر غريبًا، لماذا نحتاج أداة أخرى قبل الأداة الرئيسية؟ لنستخدم تشبيهًا بسيطًا.

ما هو Node.js؟ ولماذا نحتاجه؟

لعقود من الزمن، كانت لغة JavaScript تعيش فقط داخل متصفحات الويب (Web Browsers) مثل Chrome و Firefox. كان المتصفح هو بيتها الوحيد الذي تستطيع العمل فيه. ولكن في عام 2009، جاء Node.js ليغير كل شيء.

إن Node.js هو بيئة تشغيل (Runtime Environment) للغة JavaScript. فكر فيه على أنه محرك خاص يسمح للغة JavaScript بالعمل خارج المتصفح، مباشرة على حاسوبك الشخصي (سواء كان يعمل بنظام Windows, macOS, أو Linux).

هذا الأمر فتح آفاقًا جديدة وجعل JavaScript لغة قوية يمكن استخدامها لبناء خوادم الويب (Web Servers)، وأدوات سطر الأوامر (Command-Line Tools)، وتطبيقات سطح المكتب، وغير ذلك الكثير.

ولكن ما علاقة هذا بـ TypeScript؟

إن TypeScript نفسها، والأدوات المساعدة لها، هي برامج مكتوبة بلغة JavaScript. ولكي تعمل هذه الأدوات على حاسوبنا (لتحويل كود TypeScript إلى JavaScript على سبيل المثال)، فإنها تحتاج إلى بيئة Node.js لتعمل بداخلها.

إذًا، Node.js هو الأساس الذي سيمكننا من تشغيل مترجم TypeScript (TypeScript Compiler) وأدوات التطوير الأخرى.

وما هو npm؟

عندما تقوم بتثبيت Node.js، فإنه يأتي مع هدية قيمة: npm، والذي هو اختصار لـ Node Package Manager أو مدير حزم Node.

تخيل أنك تريد بناء سيارة من قطع الليغو. بدلاً من تصنيع كل قطعة بنفسك، يمكنك الذهاب إلى متجر ليغو وشراء حزم (Packages) جاهزة: حزمة للإطارات، حزمة للمحرك، حزمة للهيكل، وهكذا. هذا يوفر عليك الكثير من الوقت والجهد.

إن npm هو متجر الليغو الخاص بالمبرمجين. إنه مستودع ضخم على الإنترنت يحتوي على مئات الآلاف من "الحزم" البرمجية الجاهزة التي كتبها مطورون آخرون حول العالم. هذه الحزم يمكن أن تكون أي شيء: أداة صغيرة تقوم بمهمة واحدة، أو مكتبة ضخمة (Library)، أو إطار عمل كامل (Framework).

سنستخدم npm لتنزيل وتثبيت TypeScript نفسها، بالإضافة إلى أي حزم أخرى قد نحتاجها في مشاريعنا المستقبلية. إنه أداة لا غنى عنها في تطوير الويب الحديث.

الخلاصة: نثبت Node.js لنحصل على بيئة لتشغيل أدواتنا، ونحصل تلقائيًا على npm الذي نستخدمه لتنزيل هذه الأدوات (مثل TypeScript).

خطوات تثبيت Node.js و npm

عملية التثبيت بسيطة ومباشرة على جميع أنظمة التشغيل.

الذهاب إلى الموقع الرسمي: افتح متصفح الويب الخاص بك وتوجه إلى الموقع الرسمي لـ Node.js: https://nodejs.org/

اختيار الإصدار المناسب: ستجد على الصفحة الرئيسية خيارين رئيسيين للتنزيل

LTS: اختصار لـ Long-Term Support (دعم طويل الأمد). هذا هو الإصدار المستقر والموصى به لمعظم المستخدمين والشركات. يتميز بالثبات والموثوقية، حيث يتلقى تحديثات أمنية وإصلاحات للأخطاء لفترة طويلة.

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

للمبتدئين، ولأغراض هذه الدورة، نوصي بشدة باختيار إصدار LTS. انقر على زر LTS لتنزيل ملف التثبيت المناسب لنظام التشغيل الخاص بك (سيقوم الموقع عادةً باكتشافه تلقائيًا).

تشغيل المثبت (Installer):

على نظام Windows: سيكون الملف الذي تم تنزيله بامتداد .msi. انقر عليه نقرًا مزدوجًا لفتحه واتبع تعليمات معالج التثبيت. ببساطة، انقر على "Next" في جميع الخطوات واقبل الإعدادات الافتراضية. تأكد من أن خيار "Add to PATH" محدد (وهو كذلك افتراضيًا)، فهذا أمر ضروري.

على نظام macOS: سيكون الملف بامتداد .pkg. انقر عليه نقرًا مزدوجًا وافعل كما في Windows، انقر على "Continue" و "Install" حتى تنتهي العملية. قد يُطلب منك إدخال كلمة مرور حساب المستخدم الخاص بك.

على نظام Linux: يمكنك التثبيت باستخدام مدير الحزم الخاص بتوزيعتك. الطريقة الأسهل غالبًا هي اتباع التعليمات الرسمية على موقع Node.js. على سبيل المثال، في توزيعات Debian/Ubuntu، يمكنك استخدام الأوامر التالية في الطرفية (Terminal):

CODE

# Using NodeSource repository for the latest LTS version
 curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
 sudo apt-get install -y nodejs

التحقق من التثبيت

هذه هي أهم خطوة للتأكد من أن كل شيء يعمل بشكل صحيح. سنحتاج إلى استخدام واجهة سطر الأوامر (Command-Line Interface - CLI).

ما هي واجهة سطر الأوامر؟ إنها طريقة للتفاعل مع حاسوبك عن طريق كتابة الأوامر النصية بدلاً من النقر على الأيقونات. لا تخف منها، فهي أداة قوية جدًا للمبرمجين.

كيفية فتحها؟

• في Windows: اضغط على مفتاح Windows، اكتب cmd واضغط Enter لفتح Command Prompt، أو اكتب powershell واضغط Enter لفتح Windows PowerShell (كلاهما يعمل).
• في macOS: اذهب إلى Applications > Utilities وافتح تطبيق Terminal.
• في Linux: ابحث عن تطبيق Terminal أو استخدم الاختصار Ctrl+Alt+T في معظم التوزيعات.

أوامر التحقق: الآن، في نافذة سطر الأوامر التي فتحتها، اكتب الأمر التالي واضغط على Enter:

CODE

node -v

يجب أن ترى رقم إصدار مطبوعًا على الشاشة، شيئًا مثل v18.17.1. هذا يؤكد أن Node.js تم تثبيته بنجاح.

بعد ذلك، اكتب الأمر التالي للتحقق من npm واضغط على Enter:

CODE

npm -v

مرة أخرى، يجب أن ترى رقم إصدار، مثل 9.6.7. وهذا يؤكد أن npm جاهز للاستخدام.

إذا رأيت أرقام الإصدارات لكلا الأمرين، فتهانينا! لقد قمت بتثبيت الأساس الصلب لبيئة التطوير الخاصة بك بنجاح.

الجزء الثاني: مساحة العمل - إعداد محرر الأكواد Visual Studio Code

الآن بعد أن أصبح لدينا المحرك (Node.js) ومدير الأدوات (npm)، نحتاج إلى ورشة عمل فعلية نكتب فيها أكوادنا. هذه الورشة هي محرر الأكواد (Code Editor).

ما هو محرر الأكواد؟ ولماذا لا نستخدم المفكرة (Notepad)؟

محرر الأكواد هو برنامج نصي مصمم خصيصًا لكتابة الشيفرة البرمجية.

يمكنك تقنيًا كتابة الكود في أي محرر نصوص بسيط مثل المفكرة، ولكن سيكون الأمر أشبه بمحاولة بناء سيارة باستخدام مفك براغي فقط.

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

• تمييز الصيغة (Syntax Highlighting): تلوين أجزاء الكود المختلفة (المتغيرات، الدوال، السلاسل النصية) بألوان مميزة، مما يجعل قراءته وفهمه أسهل بكثير.
• الإكمال التلقائي للكود (Code Completion / IntelliSense): يقترح عليك المحرر إكمالات ممكنة وأنت تكتب، مما يسرّع عملية الكتابة ويقلل الأخطاء الإملائية.
• كشف الأخطاء (Error Highlighting): يضع خطًا أحمر تحت الأكواد التي قد تحتوي على خطأ حتى قبل تشغيلها.
• التكامل مع أدوات أخرى: مثل طرفية مدمجة (Integrated Terminal)، وتكامل مع نظام التحكم بالإصدارات Git، وأدوات تصحيح الأخطاء (Debugging).

لماذا نختار Visual Studio Code (VS Code)؟

هناك العديد من محررات الأكواد الرائعة، ولكن Visual Studio Code (VS Code) أصبح المعيار الفعلي في عالم تطوير الويب لعدة أسباب:

• مجاني ومفتوح المصدر: مقدم من شركة Microsoft ومتاح للجميع مجانًا.
• قوي وخفيف الوزن: يعمل بسرعة ولا يستهلك الكثير من موارد النظام.
• دعم TypeScript استثنائي: نظرًا لأن Microsoft هي من طورت TypeScript و VS Code، فإن التكامل بينهما مثالي. ستحصل على أفضل تجربة ممكنة عند كتابة TypeScript في VS Code.
• نظام إضافات (Extensions) ضخم: يمكنك تخصيص المحرر وإضافة ميزات جديدة لا حصر لها عن طريق تثبيت الإضافات من سوق VS Code.

خطوات تثبيت Visual Studio Code

اذهب إلى الموقع الرسمي: افتح متصفحك وتوجه إلى: https://code.visualstudio.com/

تنزيل المثبت: انقر على زر التنزيل الكبير والبارز في الصفحة الرئيسية. سيقوم الموقع تلقائيًا باكتشاف نظام التشغيل الخاص بك وتقديم النسخة المناسبة (Windows, macOS, Linux).

تشغيل المثبت:

في Windows: شغل ملف .exe الذي تم تنزيله. من المهم جدًا خلال عملية التثبيت أن تتأكد من تحديد الخيارين التاليين (عادة ما تكون محددة افتراضيًا):

Add "Open with Code" action to Windows Explorer file context menu

Add "Open with Code" action to Windows Explorer directory context menu

Add to PATH (requires shell restart)(هذا الخيار هو الأهم)

في macOS: سيتم تنزيل ملف .zip. قم بفك ضغطه واسحب أيقونة Visual Studio Code إلى مجلد التطبيقات (Applications).

في Linux: يمكنك تنزيل ملف .deb (لتوزيعات Debian/Ubuntu) أو .rpm (لتوزيعات Fedora/Red Hat) وتثبيته، أو متابعة التعليمات الخاصة بمدير الحزم لديك.

فتح VS Code لأول مرة: بعد انتهاء التثبيت، افتح VS Code. ستستقبلك شاشة ترحيبية. خذ بضع دقائق لتصفحها. يمكنك اختيار المظهر اللوني (Theme) الذي تفضله (فاتح أو داكن).

إضافات (Extensions) أساسية لتعزيز تجربتك

قوة VS Code الحقيقية تكمن في الإضافات. لنجعل بيئتنا أفضل، سنقوم بتثبيت بعض الإضافات المفيدة.

فتح قسم الإضافات: على الجانب الأيسر من نافذة VS Code، ستجد شريطًا به عدة أيقونات. انقر على أيقونة المربعات (عادة ما تكون الأخيرة) أو استخدم الاختصار Ctrl+Shift+X لفتح لوحة الإضافات.

ابحث وثبت الإضافات التالية:

• Prettier - Code formatter: هذه الإضافة هي منقذة للحياة. تقوم تلقائيًا بتنسيق الكود الخاص بك لجعله مقروءًا ومتسقًا في كل مرة تقوم فيها بحفظ الملف. هذا يضمن أن يكون الكود الخاص بك نظيفًا ومرتبًا دائمًا.
• ESLint: أداة تحليل للكود تساعد في العثور على الأنماط الإشكالية أو الأكواد التي لا تلتزم بإرشادات معينة. إنها كمدقق نحوي لكودك، تساعدك على كتابة كود أفضل وأقل عرضة للأخطاء.

للتثبيت، ببساطة اكتب اسم الإضافة في شريط البحث، انقر عليها من النتائج، ثم انقر على زر "Install" الأزرق.

الآن، ورشة عملنا أصبحت جاهزة ومجهزة بأفضل الأدوات. لدينا المحرك (Node.js) ومساحة العمل المنظمة (VS Code). حان الوقت الآن لجلب الأداة الرئيسية التي جئنا من أجلها: TypeScript.

الجزء الثالث: نجم العرض - تثبيت TypeScript

مع وجود Node.js و npm مثبتين، أصبحت عملية تثبيت TypeScript سهلة للغاية. تذكر أن npm هو مدير الحزم الذي نستخدمه لجلب الأدوات؟ حسنًا، TypeScript هي مجرد "حزمة" أخرى يمكننا طلبها من npm.

التثبيت العام (Global) مقابل التثبيت المحلي (Local)

قبل كتابة أمر التثبيت، هناك مفهوم مهم يجب أن نفهمه: الفرق بين تثبيت حزمة بشكل عام (Globally) أو بشكل محلي (Locally).

التثبيت العام (Global Installation):

التشبيه: فكر في هذا الأمر على أنه وضع أداة شائعة الاستخدام، مثل مطرقة، في صندوق الأدوات الرئيسي في ورشتك. يمكنك الوصول إلى هذه المطرقة واستخدامها في أي مكان وفي أي مشروع تعمل عليه.

ماذا يعني تقنيًا؟: عندما تثبت حزمة بشكل عام، يتم وضعها في مكان مركزي واحد على نظامك، وتصبح أوامرها متاحة في أي مكان تفتح فيه الطرفية (Terminal).

متى نستخدمه؟: جيد للأدوات التي تريد استخدامها كأوامر مستقلة، مثل tsc (مترجم TypeScript) الذي سنستخدمه للتعلم والتجارب السريعة.

التثبيت المحلي (Local Installation):

التشبيه: تخيل أنك تعمل على مشروع يتطلب نوعًا خاصًا جدًا من البراغي ومفك براغي مخصص لها. بدلاً من وضع هذا المفك الخاص في صندوق الأدوات الرئيسي، ستحتفظ به داخل صندوق المشروع نفسه. بهذه الطريقة، يكون دائمًا مع المشروع الخاص به.

ماذا يعني تقنيًا؟: عندما تثبت حزمة بشكل محلي، يتم تنزيلها داخل مجلد خاص يسمى node_modules داخل مجلد مشروعك فقط. لا يمكن الوصول إليها أو استخدامها خارج هذا المشروع.

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

لأغراض التعلم، سنبدأ بالتثبيت العام لأنه أبسط، ثم سنوضح كيفية العمل محليًا، وهي الطريقة التي ستستخدمها في المستقبل.

التثبيت العام لـ TypeScript

هذا التثبيت سيجعل أمر مترجم TypeScript، وهو tsc، متاحًا في أي مكان على حاسوبك.

افتح الطرفية (Terminal / Command Prompt / PowerShell).

اكتب الأمر التالي واضغط Enter:

CODE

npm install -g typescript

لنفكك هذا الأمر:

• npm: نحن نخاطب مدير الحزم.
• install: نريد تثبيت حزمة.
• -g: هذه هي العلامة (Flag) التي تخبر npm بأننا نريد التثبيت بشكل عام (global).
• typescript: اسم الحزمة التي نريد تثبيتها.

ملاحظة لمستخدمي macOS و Linux: قد تواجه خطأ يتعلق بالأذونات (Permission denied). هذا لأن npm يحاول الكتابة في دليل نظام محمي. لديك خياران:

1. الطريقة السريعة (لا ينصح بها كثيرًا): قم بتشغيل الأمر باستخدام sudo لإعطائه صلاحيات المدير: sudo npm install -g typescript.
2. الطريقة الأفضل (ممارسة احترافية): قم بتهيئة npm لاستخدام دليل مختلف لا يتطلب صلاحيات المدير. يمكنك البحث عن "fixing npm permissions" لمزيد من التفاصيل.

التحقق من التثبيت: بعد انتهاء الأمر من التنفيذ، تحقق من أن tsc متاح الآن. اكتب الأمر التالي:

CODE

tsc --version
# or tsc -v for short

يجب أن ترى رقم الإصدار مطبوعًا على الشاشة، شيئًا مثل Version 5.1.6. هذا يعني أن مترجم TypeScript جاهز للاستخدام!

التثبيت المحلي لـ TypeScript (الطريقة الاحترافية)

دعنا الآن نتعلم الطريقة الصحيحة للعمل على المشاريع.

إنشاء مجلد للمشروع: أولاً، قم بإنشاء مجلد جديد لمشروعنا الأول. يمكنك القيام بذلك من خلال واجهة المستخدم الرسومية، أو عبر الطرفية:

CODE

# Create a new directory
mkdir my-first-ts-project

# Navigate into the new directory
cd my-first-ts-project

تهيئة المشروع كـ npm project: الآن، ونحن داخل مجلد المشروع، نحتاج إلى إخبار npm بأن هذا المجلد هو مشروع جديد. نفعل ذلك باستخدام الأمر init:

CODE

npm init -y

هذا الأمر يقوم بإنشاء ملف جديد مهم جدًا يسمى package.json. هذا الملف هو بمثابة بطاقة هوية لمشروعك. إنه يحتوي على معلومات مثل اسم المشروع، الإصدار، والأهم من ذلك، قائمة بالحزم المحلية التي يعتمد عليها المشروع (Dependencies).\
العلامة -y تخبر npm بقبول جميع الإعدادات الافتراضية، مما يسرع العملية.

تثبيت TypeScript محليًا: الآن، قم بتثبيت حزمة TypeScript داخل هذا المشروع:

CODE

npm install typescript --save-dev

أو بالاختصار:

CODE

npm i typescript -D

لاحظ الاختلافات:

• لم نستخدم العلامة -g. هذا يخبر npm بتثبيت الحزمة محليًا.
• استخدمنا العلامة --save-dev (أو -D). هذا يخبر npm بأن TypeScript هي اعتمادية تطوير (Development Dependency). هذا يعني أننا نحتاج TypeScript فقط أثناء عملية تطوير المشروع (لتحويل الكود)، ولكنها ليست ضرورية لتشغيل التطبيق النهائي بعد تحويله إلى JavaScript. سيقوم npm بتسجيل هذا في ملف package.json الخاص بك.

بعد تشغيل هذا الأمر، ستلاحظ شيئين جديدين في مجلد مشروعك:

• مجلد ضخم يسمى node_modules: هنا يقوم npm بتخزين جميع الحزم المحلية.
• ملف يسمى package-lock.json: هذا الملف يسجل الإصدارات الدقيقة لكل حزمة تم تثبيتها لضمان أن كل من يعمل على المشروع يستخدم نفس الإصدارات بالضبط.

التحقق من التثبيت المحلي: إذا حاولت الآن تشغيل tsc -v مباشرة، فقد تحصل على خطأ "command not found" (إلا إذا كنت قد قمت بالتثبيت العام أيضًا). هذا لأن الأمر موجود داخل node_modules وليس في مسار النظام العام.

فكيف نستخدمه؟ باستخدام أداة رائعة تأتي مع npm تسمى npx.

npx (Node Package Execute) هي أداة تبحث عن الأمر في مجلد node_modules المحلي أولاً، وإذا وجدته، تقوم بتشغيله. هذا هو الحل الأمثل لتشغيل الأوامر المثبتة محليًا.

جرب الآن:

CODE

npx tsc -v

يجب أن ترى الآن رقم إصدار TypeScript، مما يؤكد نجاح التثبيت المحلي!

الجزء الرابع: أول برنامج لك - من TypeScript إلى JavaScript

لقد قمنا بتثبيت كل شيء. حان الوقت الآن لنرى كل هذه الأدوات تعمل معًا في تناغم. سنكتب أول كود TypeScript لنا، ثم سنقوم بترجمته إلى JavaScript، وأخيرًا سنقوم بتشغيله.

افتح المشروع في VS Code: إذا كنت لا تزال في الطرفية داخل مجلد مشروعك (my-first-ts-project)، يمكنك ببساطة كتابة الأمر التالي لفتح المجلد بأكمله في VS Code:

CODE

code .

(النقطة . تعني "هذا المجلد الحالي").

إنشاء أول ملف TypeScript: في مستكشف الملفات (Explorer) على يسار VS Code، انقر بزر الماوس الأيمن واختر "New File". قم بتسمية الملف main.ts. لاحظ امتداد الملف .ts، هذا هو ما يخبر VS Code ومترجم TypeScript أن هذا الملف يحتوي على كود TypeScript.

كتابة الكود: في ملف main.ts، اكتب الكود البسيط التالي:

CODE

// This function greets a person by name.
// The `: string` part is a type annotation from TypeScript.
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Brendan Eich", new Date());

هذا الكود يعرف دالة (Function) بسيطة تأخذ اسمًا وتاريخًا، ثم تطبع رسالة ترحيب. لاحظ person: string و date: Date. هذه هي لمسة TypeScript السحرية! نحن نخبر TypeScript صراحةً أن المتغير person يجب أن يكون دائمًا نصًا (string)، وأن date يجب أن يكون كائن تاريخ (Date). VS Code سيفهم هذا ويعطيك إكمالًا تلقائيًا ذكيًا.

الترجمة (Compilation): الآن، الخطوة الحاسمة. كما ذكرنا، المتصفحات و Node.js لا يفهمان كود TypeScript مباشرة. يجب علينا أولاً ترجمته (أو تصريفه - Transpilation) إلى كود JavaScript عادي.

افتح الطرفية المدمجة في VS Code باستخدام الاختصار Ctrl+` (مفتاح backtick، عادة ما يكون بجوار الرقم 1) أو من القائمة Terminal > New Terminal.

في الطرفية، اكتب أمر الترجمة التالي:

CODE

npx tsc main.ts

(إذا قمت بتثبيت TypeScript بشكل عام، يمكنك استخدام tsc main.ts فقط).

لاحظ النتيجة: بعد تنفيذ الأمر، انظر إلى مستكشف الملفات. ستجد ملفًا جديدًا قد ظهر تلقائيًا: main.js.

افتح هذا الملف. ستجد بداخله شيئًا كهذا:

CODE

// This function greets a person by name.
// The `: string` part is a type annotation from TypeScript.
function greet(person, date) {
    console.log("Hello ".concat(person, ", today is ").concat(date.toDateString(), "!"));
}
greet("Brendan Eich", new Date());

لاحظ ما حدث! قام مترجم TypeScript (tsc) بقراءة ملف .ts الخاص بك، وأزال جميع إضافات TypeScript (مثل : string و : Date)، وأنتج ملف .js مكافئ ومفهوم من قبل أي بيئة JavaScript.

التشغيل (Execution): الآن بعد أن أصبح لدينا ملف JavaScript نقي، يمكننا تشغيله باستخدام Node.js. في نفس الطرفية، اكتب الأمر:

CODE

node main.js

ستظهر النتيجة في الطرفية:

CODE

Hello Brendan Eich, today is [current date]!

لقد فعلتها! لقد كتبت كود TypeScript، قمت بترجمته إلى JavaScript، وقمت بتشغيله بنجاح. لقد أكملت الدورة الكاملة لعملية تطوير TypeScript.

خلاصة القسم

في هذا القسم المفصل، قمنا ببناء بيئة تطوير قوية ومتكاملة من الصفر. دعونا نلخص ما أنجزناه:

1. فهمنا أهمية بيئة التطوير: أدركنا أنها ورشة العمل الأساسية التي تمكننا من بناء البرمجيات بكفاءة.
2. ثبتنا Node.js و npm: حصلنا على المحرك الذي يشغل أدواتنا (Node.js) ومدير الحزم الذي يجلبها لنا (npm).
3. أعددنا محرر الأكواد VS Code: جهزنا مساحة عمل احترافية مع ميزات مساعدة قوية مثل تمييز الصيغة والإكمال التلقائي، وعززناها بإضافات مفيدة.
4. ثبتنا TypeScript: تعلمنا الفرق بين التثبيت العام والمحلي، وقمنا بتثبيت مترجم TypeScript (tsc) باستخدام npm.
5. أكملنا أول دورة تطوير: كتبنا كودًا في ملف .ts، استخدمنا tsc لترجمته إلى ملف .js، ثم استخدمنا node لتشغيل ملف JavaScript الناتج ورؤية المخرجات.

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