TypeScript - Union Types: A Friendly Introduction for Beginners

Ciao هناك، المستقبل نجم البرمجة! ? هل أنت مستعد للغوص في العالم الرائع لـ TypeScript وتعلم واحدة من ميزاته الأكثر قوة؟ اليوم، سنستكشف أنواع المجموعات (Union Types)، وهي فكرة قد تبدو مخيفة في البداية، لكنني أعدك ستجدها مفيدة للغاية و حتى ممتعة بنهاية هذا الدليل!

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

ما هي أنواع المجموعات؟

قبل أن ننتقل إلى التفاصيل، دعونا نبدأ بمثال بسيط. تخيل أنك تملك صندوقًا سحريًا يمكنه احتواء سيارة玩具 أو حيوان محشو، ولكن ليس كليهما في نفس الوقت. هذا نوعًا ما ما هو نوع المجموعات في TypeScript - إنه طريقة تخبر кодنا بأن المتغير يمكن أن يكون أحد عدة أنواع.

الآن، دعونا نبدأ بكتابة بعض الكود!

syntaxis: Union Literal

ال sintaxis الأساسية لأنواع المجموعات تستخدم علامة los أنبوب (|) لفصل الأنواع المختلفة. كما لو كنت تخبر TypeScript، "ها، هذا يمكن أن يكون هذا أو ذاك!"

let myFavorite: string | number;

myFavorite = "TypeScript"; // هذا صالح
console.log(myFavorite); // الإخراج: TypeScript

myFavorite = 42; // هذا أيضًا صالح
console.log(myFavorite); // الإخراج: 42

// myFavorite = true; // هذا سيسبب خطأ

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

متغير نوع المجموعات

دعونا نوسع مثالنا السابق ونرى كيف يمكن لأنواع المجموعات جعل كودنا أكثر مرونة:

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // هذا صالح
console.log(`I have a ${myPet}`); // الإخراج: I have a cat

myPet = "dog"; // هذا أيضًا صالح
console.log(`I have a ${myPet}`); // الإخراج: I have a dog

// myPet = "elephant"; // هذا سيسبب خطأ

هنا، قمنا بإنشاء نوع مخصص يسمى Pet يمكن أن يكون أحد ثلاثة"strings" محددة. مثل متجر حيوانات أليفة يبيع فقط القطط والكلاب والأسماك. إذا حاولت شراء فيل، آسف، لا يمكن!

نوع المجموعات والمعلمة الوظيفية

تألّق أنواع المجموعات حقًا عندما نستخدمها مع الدوال. إنها تسمح لدينا أن تكون دوالنا أكثر تطورًا دون فقدان الأمان النوعي. دعونا نرى مثالاً:

function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}

printId(101); // الإخراج: Your ID is: 101
printId("202"); // الإخراج: Your ID is: 202

// printId(true); // هذا سيسبب خطأ

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

نوع المجموعات واللوائح

الآن، دعونا نرفع مستوى ونرى كيف تعمل أنواع المجموعات مع اللوائح. استعد لمغامرة اللوائح السحرية!

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // الإخراج: [1, "two", 3, "four", 5]

mixedArray.push(6); // هذا صالح
mixedArray.push("seven"); // هذا أيضًا صالح

// mixedArray.push(true); // هذا سيسبب خطأ

console.log(mixedArray); // الإخراج: [1, "two", 3, "four", 5, 6, "seven"]

هنا، قمنا بإنشاء لوائح يمكن أن تحتوي على أرقام و"strings". مثل قائمة تشغيل يمكن أن تشمل كل من أرقام الأغاني و titiles الأغاني. ولكن حاول إدخال منطقي، وسيقوم TypeScript باعتقالك بيد حمراء!

الاستخدامات العملية

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

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

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`Success! Data: ${response.data}`);
} else {
console.log("An error occurred");
}
}

handleResponse({ status: "success", data: "User profile loaded" });
handleResponse({ status: "error", data: null });

2. خيارات التكوين: عند إنشاء دوال قابلة للتكوين، تسمح أنواع المجموعات بتقديم مجموعة من الخيارات القابلة للتحديد.

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`Creating a ${color} button of size ${size}`);
}

createButton("red", "medium"); // صالح
// createButton("yellow", "extra-large"); // هذا سيسبب خطأ

طرق أنواع المجموعات الشائعة

إليك جدول بطرق شائعة يمكنك استخدامها مع أنواع المجموعات:

الطريقة	الوصف	المثال
typeof	فحص نوع القيمة	typeof x === "string"
instanceof	فحص ما إذا كان الكائن نموذجًا من فئة معينة	x instanceof Date
in	فحص ما إذا كانت الخاصية موجودة في الكائن	"name" in x
Array.isArray()	فحص ما إذا كانت القيمة لوائح	Array.isArray(x)

الخاتمة

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

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

بينما ننهي، أتذكر طالبًا قال لي ذات مرة، "أنواع المجموعات هي مثل السكين السويسري لكودي!" وانت تعلم ماذا؟ كان على حق تمامًا. لذا، تقدم، يا صديقي البرمجي، وربما تكون أنواع المجموعات دائمًا في صالحك! ??

Credits: Image by storyset