01- مقدمة إلى TypeScript: ترقية جافاسكريبت لمستقبل تطوير الويب

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

في هذا القسم التمهيدي، سنضع حجر الأساس لكل ما ستتعلمه في هذه الدورة.

هدفنا هنا ليس فقط أن نعرف ما هي TypeScript، بل أن نفهم بعمق لماذا أصبحت أداة لا غنى عنها في صندوق أدوات أي مطور ويب محترف اليوم.

سنتعامل مع الموضوع كما لو أنك لم تسمع من قبل عن مصطلحات مثل "الكتابة الثابتة" أو "المترجم". سنبدأ من الصفر المطلق.

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

الآن، تخيل أن لديك نفس الصندوق، ولكن هذه المرة تم فرز كل القطع ووضعها في مقصورات مُعنونة بوضوح: "مكعبات حمراء 2x4"، "مكعبات زرقاء 1x2"، "عجلات صغيرة". هذا هو عالم TypeScript. إنها نفس القطع (نفس جافاسكريبت)، لكن مع نظام صارم يضمن أنك تستخدم القطعة الصحيحة في المكان الصحيح منذ البداية. هذا النظام لا يغير من طبيعة القطع، ولكنه يغير تمامًا من طريقة بنائك، جاعلاً إياها أسرع، أكثر دقة، وأقل عرضة للأخطاء الكارثية.

في هذا القسم، سنفكك هذا التشبيه ونترجمه إلى مفاهيم برمجية حقيقية.

سنكتشف معًا لماذا هذا "التنظيم الإضافي" الذي تقدمه TypeScript ليس مجرد رفاهية، بل ضرورة حتمية لبناء تطبيقات الويب الحديثة، الكبيرة، والمعقدة.

العودة إلى الأساسيات: ما هي JavaScript ولماذا تحتاج إلى مساعدة؟

قبل أن نقدر قوة TypeScript، يجب أن نفهم طبيعة اللغة التي بُنيت عليها: JavaScript.

JavaScript: لغة الويب الديناميكية والمرنة

جافاسكريبت هي لغة البرمجة التي تبث الحياة في صفحات الويب. عندما تضغط على زر ويتغير شيء ما على الصفحة، أو عندما ترى تحديثات حية في صفحتك على وسائل التواصل الاجتماعي، أو تتفاعل مع خريطة، فكل هذا يحدث بفضل JavaScript. إنها لغة أساسية للويب، تعمل مباشرة في متصفح المستخدم.

أهم ما يميز JavaScript (وهو في نفس الوقت أكبر نقاط ضعفها) هي أنها لغة ديناميكية النوع (Dynamically Typed). ماذا يعني هذا؟

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

لنتخيل متغيرًا كصندوق. في JavaScript، هذا الصندوق يمكنه احتواء أي شيء. اليوم تضع فيه تفاحة (رقم)، وغداً تضع فيه كتابًا (نص)، وبعد غد تضع فيه مجموعة أدوات (كائن). JavaScript لا تمانع إطلاقًا.

مثال عملي في JavaScript:

CODE

// 'userPoints' starts as a number
let userPoints = 100;
console.log(userPoints); // Output: 100

// We perform a mathematical operation, everything is fine
userPoints = userPoints - 10;
console.log(userPoints); // Output: 90

// Now, due to a mistake somewhere in the code, we assign a string to it
// JavaScript allows this without any warning!
userPoints = "No points available";

// Later in the code, another part of the program tries to do math with it
// This will lead to unexpected behavior or a crash
let finalPoints = userPoints - 5;
console.log(finalPoints); // Output: NaN (Not a Number)

في المثال أعلاه، الخطأ لم يظهر عندما أسندنا القيمة النصية للمتغير userPoints. الخطأ ظهر لاحقًا عندما حاولنا إجراء عملية حسابية عليه. هذا هو الخطر الكامن.

الجانب المظلم للمرونة: أخطاء وقت التشغيل (Runtime Errors)

المشكلة التي رأيناها في المثال السابق تسمى خطأ وقت التشغيل (Runtime Error). مصطلح "وقت التشغيل (Runtime)" يعني "أثناء تشغيل البرنامج فعليًا" (أي عندما يستخدمه المستخدم النهائي في متصفحه).

هذه الأخطاء هي أسوأ كابوس للمطورين. لماذا؟

1. تحدث بشكل غير متوقع: قد لا تكتشفها أثناء تطويرك للبرنامج، بل تظهر فقط عند المستخدم في ظروف معينة.
2. صعبة التعقب: في تطبيق كبير، قد يكون من الصعب جدًا معرفة أي جزء من الكود تسبب في تغيير نوع المتغير بشكل خاطئ.
3. تؤثر على تجربة المستخدم: قد تؤدي إلى تعطل الصفحة، أو عرض بيانات خاطئة، أو منع المستخدم من إكمال مهمة ما، مما يؤدي إلى إحباطه وفقدان الثقة في التطبيق.

كان هذا هو الواقع الذي عاشه مطورو الويب لسنوات.

مع نمو التطبيقات لتصبح أكثر تعقيدًا من أي وقت مضى (مثل Google Docs, Figma, Facebook)، أصبحت هذه المشكلة عائقًا كبيرًا أمام بناء برمجيات موثوقة وقابلة للصيانة.

تقديم المنقذ: ما هي TypeScript بالضبط؟

هنا يأتي دور TypeScript. تم إنشاؤها بواسطة شركة Microsoft كحل مباشر لمشاكل JavaScript في التطبيقات الكبيرة.

TypeScript ليست لغة جديدة، بل هي JavaScript مع قوى خارقة

أهم حقيقة يجب أن تعرفها: TypeScript ليست لغة برمجة منفصلة تمامًا عن JavaScript. بل هي ما نسميه مجموعة فائقة (Superset) من JavaScript.

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

هذا يعني أن أي كود JavaScript صالح هو أيضًا كود TypeScript صالح. يمكنك أخذ أي ملف .js وتغيير امتداده إلى .ts وسيعمل (على الرغم من أنك لن تستفيد من ميزات TypeScript بعد).

إذًا، كيف تعمل TypeScript؟

إنها تضيف خطوة إضافية في عملية التطوير تسمى الترجمة (Compilation) أو بشكل أدق التحويل (Transpilation).

1. أنت تكتب كودك في ملفات بامتداد .ts (TypeScript).
2. قبل تشغيل الكود، تقوم بتمريره عبر مترجم TypeScript (TypeScript Compiler - TSC).
3. هذا المترجم يقوم بأمرين:

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

المتصفح لا يفهم TypeScript. المتصفح يفهم JavaScript فقط. TypeScript هي أداة للمطورين، تساعدنا في كتابة كود أفضل، ثم تحوله إلى اللغة التي يفهمها المتصفح.

المسار: كود TypeScript (.ts) ⬅️ مترجم TypeScript ⬅️ كود JavaScript عادي (.js) ⬅️ المتصفح

الميزة الجوهرية: الكتابة الثابتة (Static Typing)

السحر كله يكمن في ميزة واحدة أساسية تقدمها TypeScript: الكتابة الثابتة (Static Typing).

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

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

لنعد كتابة مثالنا السابق باستخدام TypeScript:

CODE

// We explicitly say that 'userPoints' MUST be a number.
let userPoints: number = 100;

console.log(userPoints); // Output: 100

userPoints = userPoints - 10;
console.log(userPoints); // Output: 90

// Now, let's try to assign a string. 
// TypeScript will immediately show an error in your code editor!
// Error: Type 'string' is not assignable to type 'number'.
userPoints = "No points available"; 

// This part of the code will never even run because the error above 
// stops the compilation process. The bug is caught instantly.
let finalPoints = userPoints - 5;

لاحظ الفرق الجوهري. لم ننتظر حتى تشغيل البرنامج واكتشاف الخطأ. لقد تم اكتشاف الخطأ وإبلاغنا به أثناء كتابة الكود مباشرة في محرر النصوص (مثل VS Code). لقد انتقلنا من اكتشاف الأخطاء في "وقت التشغيل" إلى اكتشافها في "وقت التطوير". هذه نقلة نوعية هائلة.

لماذا TypeScript ضرورية لتطوير الويب الحديث؟ (الفوائد العملية)

الآن بعد أن فهمنا "ماذا" و "كيف"، لنتعمق في "لماذا". لماذا استثمرت شركات مثل Google وMicrosoft وAirbnb والملايين من المطورين وقتهم في الانتقال إلى TypeScript؟

اكتشاف الأخطاء مبكراً: من وقت التشغيل إلى وقت التطوير

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

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

مثال أكثر واقعية: تخيل دالة تعرض رسالة ترحيب للمستخدم.

في JavaScript:

CODE

  function welcomeUser(user) {
    // What if 'user' is null? Or a string? Or an object without a 'name' property?
    // This line will crash if user is null or undefined.
    console.log(`Welcome, ${user.name}!`);
  }

  welcomeUser({ name: 'Ahmed', age: 30 }); // Works fine
  welcomeUser(null); // CRASH! TypeError: Cannot read properties of null (reading 'name')
  welcomeUser({ username: 'Fatima' }); // BUG! Prints "Welcome, undefined!"

في TypeScript:

CODE

  // We define the 'shape' of a user object. It must have a 'name' property of type string.
  interface User {
    name: string;
  }

  function welcomeUser(user: User) {
    console.log(`Welcome, ${user.name}!`);
  }

  welcomeUser({ name: 'Ahmed' }); // Works fine

  // ERROR! Argument of type 'null' is not assignable to parameter of type 'User'.
  welcomeUser(null); 

  // ERROR! Object literal may only specify known properties, and 'name' is missing.
  welcomeUser({ username: 'Fatima' }); 

مع TypeScript، أصبح من المستحيل تمرير بيانات خاطئة إلى الدالة welcomeUser. لقد قمنا بحماية دالتنا من مدخلات غير متوقعة على مستوى اللغة نفسها.

تحسين هائل لتجربة المطور (Developer Experience)

تجربة المطور (DX) هي مدى سهولة ومتعة كتابة الكود. TypeScript تحول البرمجة من عمل تخميني إلى تجربة دقيقة وموجهة.

• الإكمال التلقائي الذكي (Intelligent Autocomplete): لأن محرر الكود يفهم أنواع بياناتك، فإنه يقدم اقتراحات دقيقة بشكل لا يصدق. عندما تكتب user.، سيقترح عليك المحرر فورًا خاصية .name، لأنه يعرف أن المتغير user هو من النوع User الذي يحتوي على هذه الخاصية. هذا يقلل من الأخطاء الإملائية ويسرع عملية الكتابة بشكل كبير.

• إعادة الهيكلة الآمنة (Safer Refactoring): "إعادة الهيكلة" هي عملية تحسين الكود الحالي دون تغيير وظيفته. لنفترض أنك قررت تغيير اسم الخاصية name إلى fullName في الواجهة User. في مشروع JavaScript كبير، قد تكون هذه عملية مرعبة. سيتعين عليك البحث في كل ملف للعثور على كل استخدام لـ user.name وتغييره يدويًا، وهناك فرصة كبيرة أن تفوت بعضها.\
  في TypeScript، بمجرد تغيير name إلى fullName في الواجهة، سيقوم المحرر فورًا بوضع خط أحمر تحت كل مكان في المشروع بأكمله يستخدم user.name، معتبراً إياه خطأ. يمكنك التنقل بين هذه الأخطاء وإصلاحها بثقة تامة بأنك لم تفوت أي شيء.

• التوثيق الذاتي للكود (Self-documenting Code): في كثير من الأحيان، عندما تقرأ كود JavaScript كتبه شخص آخر (أو كتبته أنت بنفسك قبل 6 أشهر)، قد تضطر إلى قراءة الدالة بأكملها لفهم ما تتوقعه من مدخلات وماذا تعيده من مخرجات.\
  مع TypeScript، التواقيع (Signatures) نفسها هي توثيق. function welcomeUser(user: User): void تخبرك بكل ما تحتاج إلى معرفته في لمحة: هذه الدالة تأخذ وسيطًا واحدًا اسمه user، ويجب أن يكون كائنًا يطابق شكل الواجهة User، وهذه الدالة لا تعيد أي قيمة (void). الكود أصبح أسهل في القراءة والفهم بشكل كبير.

قابلية التوسع والصيانة (Scalability and Maintainability)

هنا تتألق TypeScript حقًا.

في المشاريع الصغيرة التي يعمل عليها مطور واحد، قد تبدو JavaScript كافية. ولكن عندما ينمو المشروع ليشمل مئات الملفات ويعمل عليه فريق من 5، 10، أو 100 مطور، تصبح JavaScript فوضوية.

تعمل الأنواع في TypeScript بمثابة عقود (Contracts) بين أجزاء مختلفة من التطبيق وبين المطورين. عندما يعرف المطور أن الدالة التي يستدعيها ستعيد دائمًا string[] (مصفوفة من النصوص)، يمكنه بناء كوده على هذا الأساس بثقة. إذا قام المطور الذي يملك تلك الدالة بتغييرها لتعيد number، فإن TypeScript ستنبه المطور الأول فورًا بأن "العقد قد كُسر" ويجب عليه تحديث كوده.

هذا يمنع سلسلة من الأخطاء المتتالية ويجعل التعاون بين الفرق أسهل بكثير، ويضمن أن يظل الكود قابلاً للصيانة والفهم مع مرور الوقت.

الوصول إلى ميزات JavaScript الحديثة اليوم

لغة JavaScript تتطور باستمرار، وتتم إضافة ميزات جديدة كل عام (ES2020, ES2021, etc.). لكن قد لا تدعم المتصفحات القديمة هذه الميزات الحديثة.

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

هل يعني هذا أن JavaScript سيئة؟

إطلاقًا. هذا مفهوم خاطئ شائع. TypeScript لا تحل محل JavaScript، بل تعززها. تذكر، في النهاية، كل كود TypeScript يتحول إلى JavaScript.

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

الأمر يشبه اختيار الأداة المناسبة للمهمة. لا تحتاج إلى مخططات هندسية معقدة لبناء كوخ صغير للكلاب (مشروع صغير)، ولكن من الجنون محاولة بناء ناطحة سحاب (تطبيق ضخم) بدونها. TypeScript هي تلك المخططات الهندسية لتطبيقات الويب.

الخلاصة: لماذا تبدأ رحلتك مع TypeScript اليوم؟

في هذا القسم، رأينا أن TypeScript ليست مجرد موضة عابرة، بل هي تطور طبيعي وضروري لكتابة JavaScript على نطاق واسع. إنها استثمار صغير في البداية (تعلم كتابة الأنواع) يؤتي ثماره بشكل هائل على المدى الطويل.

للتلخيص، TypeScript تمنحك:

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

اليوم، معظم أطر العمل (Frameworks) والمكتبات الحديثة مثل Angular, Vue, Svelte وحتى React تتبنى TypeScript بقوة. تعلمها لم يعد خيارًا، بل أصبح مهارة أساسية متوقعة من مطوري الويب المحترفين.

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