TypeScript Academy · درس

حُرّاس الأنواع

اعمل بأمان مع الأنواع unknown أو any باستخدام حُرّاس الأنواع

الدرس 4 من 410 خطوة

حُرّاس الأنواع درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

مقدمة إلى حواجز الأنواع

حواجز الأنواع

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

حُرّاس الأنواع — رسم توضيحي 1

ما حواجز الأنواع؟

حاجز النوع هو دالة أو بنية تحدد نوع متغير أثناء وقت التشغيل. ويتيح ذلك لـ TypeScript تضييق نوع المتغير داخل كتلة معينة من التعليمات البرمجية.

مثال:

المهمة: اكتب دالة تستخدم حاجز نوع للتحقق مما إذا كانت قيمة ما رقمًا.

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function printLength(value: unknown): void {
  if (isString(value)) {
    console.log(value.length); 
// TypeScript knows 'value' is a string here
  } else {
    console.log("Value is not a string");
  }
}

printLength("Hello"); 
// Output: 5
printLength(42); 
// Output: Value is not a string

استخدام <code>typeof</code> للقيم البدائية

يمكنكم استخدام العامل typeof للتحقق من نوع القيم البدائية مثل السلاسل النصية والأرقام والقيم المنطقية.

مثال:

المهمة: استخدموا typeof للتمييز بين سلسلة نصية ورقم داخل دالة.

function printValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printValue("Hello"); 
// Output: String value: Hello
printValue(42); 
// Output: Number value: 42

استخدام <code>instanceof</code> للفئات

يتحقق العامل instanceof مما إذا كان كائن ما مثيلًا لفئة معينة. مثال:

المهمة: استخدموا instanceof للتعامل مع مثيلات فئات مختلفة داخل دالة.

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

let dog = new Dog();
let cat = new Cat();
makeSound(dog); 
// Output: Woof!
makeSound(cat); 
// Output: Meow!

استخدام حواجز الأنواع المخصصة

يمكنكم إنشاء دوال مخصصة لحواجز الأنواع باستخدام نوع إرجاع هو value is Type. مثال:

interface Car {
  make: string;
  model: string;
}

interface Bike {
  brand: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).make !== undefined;
}

function printVehicle(vehicle: Car | Bike): void {
  if (isCar(vehicle)) {
    console.log(`Car: ${vehicle.make} ${vehicle.model}`);
  } else {
    console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
  }
}

let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };

printVehicle(car); 
// Output: Car: Toyota Corolla
printVehicle(bike);
 // Output: Bike: Yamaha Sport

الاتحادات المميَّزة

تستخدم الاتحادات المميَّزة خاصية مشتركة للتمييز بين الأنواع. مثال:

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };

console.log(calculateArea(circle)); 
// Output: 78.53981633974483
console.log(calculateArea(rectangle)); 
// Output: 200

التحقق من الشمول

يضمن التحقق من الشمول معالجة جميع الحالات الممكنة في اتحاد مميَّز. مثال:

function getShapeInfo(shape: Shape): string {
  switch (shape.kind) {
    case "circle":
      return `Circle with radius ${shape.radius}`;
    case "rectangle":
      return `Rectangle with dimensions ${shape.width}x${shape.height}`;
    default:
      // This line ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

الأخطاء الشائعة

إليكم بعض الأخطاء الشائعة عند استخدام حواجز الأنواع:

  • نسيان تضمين جميع الحالات في نوع اتحاد.
  • عدم استخدام حاجز نوع في جميع فروع المنطق الشرطي.
  • إساءة استخدام as لتحويل الأنواع دون إجراء عمليات التحقق المناسبة.

نصيحة: استخدموا دائمًا حواجز الأنواع لتضييق نطاق الأنواع قبل الوصول إلى خصائصها أو أساليبها الخاصة!

أحسنتم!

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

حُرّاس الأنواع — رسم توضيحي 10
البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
101
الدروس
352

الأسئلة الشائعة

هل درس «حُرّاس الأنواع» مجاني؟

نعم — نص درس «حُرّاس الأنواع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «حُرّاس الأنواع»؟

اعمل بأمان مع الأنواع unknown أو any باستخدام حُرّاس الأنواع تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «حُرّاس الأنواع»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. الأنواع العامة
  2. الأسماء المستعارة للأنواع والواجهات
  3. أنواع الأدوات
  4. حُرّاس الأنواع
← العودة إلى TypeScript Academy