Typed Props عقود أنواع الـ Props

آخر تحديث: 2026-11-03

Typed Props عقود أنواع الـ Props

في TypeScript تبني بـ interface أو type عقدًا للـ props: تُلتقط الأسماء الخاطئة والناقصة وغير المطابقة من النوع وقت الترجمة، ويكتسب المحرّر إكمالًا تلقائيًا. ضع شكلًا نوعيًا على وسائط المكوّن فيبقى تكلفة وقت التشغيل صفرًا. والعقد يوثّق المكوّن للقارئ القادم، فتُكتب واجهة المكوّن في مكان واحد.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

type User = { id: number; name: string; vip?: boolean }  // ? marks an optional property

type UserCardProps = {
  user: User
  onSelect: (id: number) => void     // callback: annotate both the parameters and the return type
  children?: React.ReactNode         // any renderable content
}

function UserCard({ user, onSelect }: UserCardProps) {
  return <li onClick={() => onSelect(user.id)}>{user.name}</li>
}

// ❌ Compile error: <UserCard user={{ id: 'x' }} />  id should be a number

القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة قابلة للاستدعاء.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

يُظهر الجدول عقد props الخاص بـ UserCard؛ والنقر على مستخدم يُطلق رد نداء onSelect ويطبع id — في مشروع TypeScript حقيقي سيُفشل نوع خاطئ وقت الترجمة (عرض JSX وقت التشغيل).

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

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

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن