حراس النوع: in و instanceof

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

عند العمل مع أنواع الاتحاد (union types)، غالباً ما تحتاج إلى تحديد النوع المحدد الذي تتعامل معه قبل أن تتمكن من الوصول بأمان إلى الخصائص أو الأساليب الخاصة بالنوع. توفر حراس النوع (Type guards) طريقة آمنة لتضييق نطاق الأنواع في وقت التشغيل (runtime).

يتحقق عامل التشغيل in مما إذا كانت الخاصية موجودة في كائن ما. هذا مفيد بشكل خاص عندما يكون لديك اتحاد (union) لأنواع الكائنات بخصائص مختلفة:

type Dog = { name: string; breed: string };
type Cat = { name: string; meow: () => void };

function petSound(pet: Dog | Cat) {
  if ('breed' in pet) {
    // TypeScript يعرف أن pet هو Dog هنا
    console.log(`${pet.name} is a ${pet.breed}`);
  } else {
    // TypeScript يعرف أن pet هو Cat هنا
    pet.meow();
  }
}

يتحقق عامل instanceof مما إذا كان الكائن قد تم إنشاؤه بواسطة دالة منشئ (constructor function) أو فئة (class) معينة. على الرغم من أننا لم نغطِ الفئات بعد، إلا أن هذا العامل مفيد عند التعامل مع كائنات JavaScript المدمجة أو الفئات المخصصة:

function processValue(value: string | Date) {
  if (value instanceof Date) {
    // TypeScript يعرف أن value هو Date
    console.log(value.getFullYear());
  } else {
    // TypeScript يعرف أن value هو string
    console.log(value.toUpperCase());
  }
}

يساعد كلا العاملين مترجم TypeScript على فهم النوع الذي تعمل معه، مما يتيح الوصول الآمن إلى الخصائص والأساليب الخاصة بالنوع.

التحدي

سهل

قم بإنشاء دالة تعالج أنواعاً مختلفة من عناصر الوسائط باستخدام عامل التشغيل in للتمييز بينها.

قم بإنشاء اسمين مستعارين للأنواع (type aliases):

Movie مع الخصائص title (string) و director (string)
Song مع الخصائص title (string) و artist (string)

قم بإنشاء دالة باسم getMediaInfo تقوم بما يلي:

تأخذ معامل media من نوع Movie | Song
تستخدم عامل التشغيل in للتحقق مما إذا كانت خاصية director موجودة
تعيد "Movie: [title] directed by [director]" إذا كان فيلماً
تعيد "Song: [title] by [artist]" إذا كانت أغنية
لها نوع إرجاع صريح هو string

قم بإنشاء دالة ثانية باسم processValue تقوم بما يلي:

تأخذ معامل value من نوع string | Date
تستخدم عامل التشغيل instanceof للتحقق مما إذا كان value من نوع Date
تعيد السنة كرقم إذا كان التاريخ (باستخدام getFullYear())
تعيد طول السلسلة النصية كرقم إذا كانت سلسلة نصية
لها نوع إرجاع صريح هو number

قم بإنشاء بيانات اختبار:

movie1: { title: "Inception", director: "Christopher Nolan" }
song1: { title: "Bohemian Rhapsody", artist: "Queen" }
movie2: { title: "The Matrix", director: "The Wachowskis" }
song2: { title: "Imagine", artist: "John Lennon" }
testDate: new Date("2023-12-25")
testString: "TypeScript"

اطبع المخرجات التالية:

استدعاء getMediaInfo مع movie1
استدعاء getMediaInfo مع song1
استدعاء getMediaInfo مع movie2
استدعاء getMediaInfo مع song2
استدعاء processValue مع testDate
استدعاء processValue مع testString

جرّب بنفسك

// TODO: اكتب كودك هنا

// إنشاء أسماء مستعارة للأنواع (type aliases) لكل من Movie و Song


// إنشاء دالة getMediaInfo


// إنشاء دالة processValue


// إنشاء بيانات اختبار
const movie1 = { title: "Inception", director: "Christopher Nolan" };
const song1 = { title: "Bohemian Rhapsody", artist: "Queen" };
const movie2 = { title: "The Matrix", director: "The Wachowskis" };
const song2 = { title: "Imagine", artist: "John Lennon" };
const testDate = new Date("2023-12-25");
const testString = "TypeScript";

// طباعة المخرجات
console.log(getMediaInfo(movie1));
console.log(getMediaInfo(song1));
console.log(getMediaInfo(movie2));
console.log(getMediaInfo(song2));
console.log(processValue(testDate));
console.log(processValue(testString));