TypeScript • المستوى الثالث • الدرس 1

تعريف الخصائص للمكونات (Typing React Components & Props)

أهداف الدرس العلمية

ربط واجهات الـ Interface للتحقق من أنواع الخصائص الممررة لـ React Components.
توفير التلميحات التلقائية (Autocompletion) داخل محرر الكود أثناء استدعاء المكون.
التعامل مع الخصائص الاختيارية (Optional Props) بداخل مكونات React بحماية تامة.
منع أخطاء إرسال قيم من أنواع غير متوافقة (مثل تمرير نص مكان رقم).

1. ما فائدة تحديد أنواع Props بـ TypeScript؟

تضمن لك TypeScript مع React مطابقة دقيقة للـ Props الممررة لكل مكون. يمنع ذلك استخدام المكون بشكل خاطئ (كإرسال نص بدل رقم) ويجعل الأكواد توثق نفسها تلقائياً للمطورين بفضل التنبيهات الفورية أثناء الكتابة.

tsx

// 1️⃣ تعريف الواجهة الخاصة بالخصائص
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean; // خاصية اختيارية
}

// 2️⃣ إسناد الواجهة للمكون
function CustomButton({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

2. أهم أنواع الخصائص في مكونات React

🧩 Primitive Props

تحديد أنواع النصوص، الأرقام، البولين، أو خيارات مخصصة مثل variant: "primary" | "secondary".

⚡ Event Handlers

تحديد الدوال والأحداث مثل onClick: () => void لتنفيذ العمليات عند النقر.

التطبيق العملي المباشر

تحدي الدرس الأول: استدعاء مكون بطاقة مستخدم ثانية

قم بالتعديل على الكود بداخل المحرر أدناه لتنفيذ ما يلي:

قم باستدعاء المكون UserCard مرة ثانية بداخل App ببيانات مخصصة مختلفة.
مرر قيم مختلفة للـ Props الإلزامية والاختيارية مثل: name="سارة محمود" و role="مصممة واجهات UI/UX" و experienceYears={3} و isAvailable={false}.
شاهد المعاينة التفاعلية والتأكد من اجتياز شروط التحدي.

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى الانتقال للدرس الثاني