Menu
CoddyTech
flag Ar iconالعربيةdown icon

التعامل مع أنواع الاتحاد

جزء من قسم مقدمة إلى TypeScript في رحلة JavaScript على Coddy. الدرس 32 من 73.

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

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

function getLength(input: string | string[]): number {
  return input.length; // آمن - كلا النوعين يمتلكان طولاً (length)
}

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

function processInput(input: string | string[]): void {
  if (typeof input === "string") {
    // يعرف TypeScript أن input عبارة عن سلسلة نصية (string) هنا
    console.log(input.toUpperCase());
  } else {
    // يعرف TypeScript أن input عبارة عن مصفوفة سلاسل نصية (string[]) هنا
    console.log(input.join(", "));
  }
}

يُعد عامل typeof أحد أكثر حراس النوع (type guards) شيوعاً. بعد التحقق، تقوم TypeScript بتضييق النوع تلقائياً داخل كل فرع، مما يمنحك وصولاً كاملاً إلى الخصائص والأساليب الخاصة بالنوع مع الحفاظ على سلامة النوع الكاملة.

challenge icon

التحدي

سهل

قم بإنشاء دالة باسم processData تقبل معاملًا يسمى input من نوع string | string[] وتعيد number. يجب أن تستخدم الدالة حارس النوع (type guard) لتحديد نوع المدخلات وتتصرف على النحو التالي:

  • إذا كان المدخل string، فقم بإرجاع طوله
  • إذا كان المدخل string[]، فقم بإرجاع إجمالي عدد الأحرف في جميع السلاسل النصية داخل المصفوفة

قم بإنشاء دالة أخرى باسم formatMessage تقبل معاملًا يسمى content من نوع number | boolean وتعيد string. يجب أن تستخدم الدالة حارس النوع (type guard) لتحديد نوع المدخلات وتتصرف على النحو التالي:

  • إذا كان المدخل number، فقم بإرجاع "Value: [number]"
  • إذا كان المدخل boolean، فقم بإرجاع "Status: [boolean]"

سيتم توفير المدخلات التالية:

  • المدخل الأول: سلسلة نصية تمثل إما كلمة واحدة أو مصفوفة JSON من السلاسل النصية مثل ["apple", "banana", "cherry"]
  • المدخل الثاني: سلسلة نصية تمثل إما رقمًا أو قيمة منطقية ("true" أو "false")

قم بمعالجة المدخلات على النحو التالي:

  • بالنسبة للمدخل الأول: إذا كان يبدأ بـ "["، فقم بتحليله كمصفوفة JSON من السلاسل النصية؛ خلاف ذلك، عامله كسلسلة نصية واحدة
  • بالنسبة للمدخل الثاني: إذا كان "true" أو "false"، فقم بتحويله إلى قيمة منطقية (boolean)؛ خلاف ذلك، قم بتحويله إلى رقم

قم باستدعاء processData مع المدخل الأول المعالج واطبع النتيجة. ثم قم باستدعاء formatMessage مع المدخل الثاني المعالج واطبع النتيجة.

جرّب بنفسك

import * as fs from "fs";

// قراءة المدخلات
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const firstInput = inputs[0];
const secondInput = inputs[1];

// TODO: اكتب الكود الخاص بك هنا
// مع حارس النوع (type guard) processData إنشاء دالة
// مع حارس النوع (type guard) formatMessage إنشاء دالة
// معالجة المدخلات وفقاً للمتطلبات
// استدعاء الدوال وطباعة النتائج
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس مقدمة إلى TypeScript

تدرّب بنفسك: Playground لـ TypeScript