🚀 اكتشف قوة المرونة مع Union Types في TypeScript

في الدروس السابقة، تعلمنا كيف نحدد نوعاً واحداً فقط للمتغير (مثل string أو number) وهذا ما يسمى بالـ "Strict Typing". لكن في الحياة الواقعية، قد نحتاج أحياناً إلى أن يكون المتغير قادراً على استقبال أكثر من نوع من البيانات.

هنا يأتي دور الـ Union Types (أنواع الاتحاد).

ما هي الـ Union Types؟ 🤔

ببساطة، الـ Union Type هي ميزة في TypeScript تسمح لك بتحديد قائمة من الأنواع المسموح بها للمتغير، بدلاً من نوع واحد فقط. يمكنك تخيلها كأنك تقول لـ TypeScript: "هذا المتغير يمكن أن يكون نصاً أو رقماً".

نستخدم الرمز | (الذي يسمى Pipe operator) للفصل بين الأنواع المختلفة.

🛠️ كيف نكتب الـ Union Types؟ (خطوة بخطوة)

لنفترض أن لدينا تطبيقاً يطلب من المستخدم إدخال معرف الحساب (ID). بعض المستخدمين قد يدخلون المعرف كـ رقم (مثلاً: 123) وبعضهم قد يدخله كـ نص (مثلاً: "ABC-123").

إليك كيف نعالج هذه الحالة باستخدام الـ Union Types:

مثال عملي 1: متغير بسيط

// هنا نخبر TypeScript أن المتغير userId يمكن أن يكون string أو number
let userId: string | number;

// الحالة الأولى: تعيين قيمة نصية (مقبول ✅)
userId = "USER_01"; 
console.log("User ID is a string: " + userId);

// الحالة الثانية: تعيين قيمة رقمية (مقبول ✅)
userId = 101; 
console.log("User ID is a number: " + userId);

// الحالة الثالثة: تعيين قيمة منطقية (غير مقبول ❌)
// userId = true; // سيقوم TypeScript بإظهار خطأ هنا لأن boolean ليس جزءاً من الاتحاد

شرح الكود:

  1. استخدمنا : string | number لنخبر المحرك أن المتغير "مرن".
  2. مسموح لنا الآن بتغيير القيمة بين نص ورقم دون أن يشتكي TypeScript.
  3. إذا حاولنا وضع نوع ثالث (مثل boolean) سيقوم TypeScript فوراً بتنبيهنا بوجود خطأ.

📦 استخدام Union Types في الدوال (Functions)

لا تقتصر الـ Union Types على المتغيرات العادية فقط، بل هي مفيدة جداً عند استقبال "البارامترات" داخل الدوال.

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

مثال عملي 2: دالة مرنة

function printWelcomeMessage(identifier: string | number) {
    // هذه الدالة تقبل identifier سواء كان نصاً أو رقماً
    console.log("Welcome to Codex Academy, " + identifier);
}

// استدعاء الدالة بنص
printWelcomeMessage("Ahmed"); // ✅ Works

// استدعاء الدالة برقم
printWelcomeMessage(550); // ✅ Works

// استدعاء الدالة بقيمة منطقية
// printWelcomeMessage(true); // ❌ Error: Argument of type 'boolean' is not assignable

لماذا فعلنا ذلك؟ بهذه الطريقة جعلنا الدالة أكثر مرونة وقدرة على التعامل مع مدخلات مختلفة، وفي نفس الوقت حافظنا على "أمان النوع" (Type Safety) بحيث لا نقبل أي نوع عشوائي.

⚠️ ملاحظة هامة للمبتدئين

عندما تستخدم Union Types، تذكر أن TypeScript سيعاملك بحذر. إذا كان المتغير يمكن أن يكون string أو number في نفس الوقت، فإن TypeScript سيسمح لك فقط باستخدام العمليات المشتركة بين النوعين، أو سيتطلب منك التأكد من النوع قبل القيام بعملية مخصصة (وهذا ما سنتطرق له في دروس متقدمة لاحقاً).

في هذه المرحلة، يكفي أن تعرف أن الـ | هي "بوابة المرونة" التي تسمح لك بتحديد عدة أنواع محتملة للمتغير الواحد. 🎯

🎓 ملخص سريع:

  • Union Types: تسمح للمتغير بأن يكون واحداً من عدة أنواع محددة.
  • الرمز المستخدم: العلامة | (Pipe).
  • الفائدة: توفر مرونة كبيرة في كتابة الكود مع الحفاظ على رقابة TypeScript على الأنواع.