$props() للخصائص ذات الأنواع
صرّح بخصائص المكوّن باستخدام التفكيك وأنواع TypeScript عبر $props().
$props() للخصائص ذات الأنواع درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
واجهة الخصائص الجديدة
يقدّم Svelte 5 الدالة $props() لتعريف خصائص المكوّن على شكل إسناد بالتفكيك.
الاستخدام الأساسي
فكّك الخصائص في تعبير واحد.
let { name, count = 0 } = $props();القيم الافتراضية
تستخدم القيم الافتراضية القيمَ الافتراضية القياسية للتفكيك.
let { theme = "dark" } = $props();الخصائص المطلوبة
الخصائص التي لا قيمة افتراضية لها مطلوبة. ويمكن لـ TypeScript فرض ذلك في الوضع المعرّف بالأنواع.
الخصائص المعرّفة بالأنواع
أضف معاملًا عامًا من TypeScript للحصول على أمان كامل للأنواع.
let { name, count = 0 }: { name: string; count?: number } = $props();خصائص rest
التقط الخصائص المتبقية باستخدام صيغة rest.
let { name, ...rest } = $props();المحتوى الفرعي والمقاطع
تحتوي الخاصية children على محتوى الفتحة الافتراضية باعتباره مقطعًا.
let { children } = $props();لم تعد هناك export let
تحلّ $props() محل صيغة export let القديمة في Svelte 5.
تفاعلية
تتحدّث الخصائص تفاعليًا عندما يمرّر المكوّن الأب قيمًا جديدة.
تمرير الخصائص باستخدام spread
مرّر خصائص rest إلى العناصر الداخلية باستخدام spread للكائن.
<input {...rest} />التوافق مع الإصدارات السابقة
لا تزال export let تعمل أثناء الترحيل؛ استخدم الصيغتين تدريجيًا.
اختبار سريع
كيف تعرّف الخصائص في Svelte 5؟
مراجعة
تُعدّ $props() واجهة الخصائص الجديدة في Svelte 5. فكّك الخصائص مع القيم الافتراضية والأنواع لإنشاء مكوّنات واضحة وآمنة.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «$props() للخصائص ذات الأنواع» مجاني؟
نعم — نص درس «$props() للخصائص ذات الأنواع» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «$props() للخصائص ذات الأنواع»؟
صرّح بخصائص المكوّن باستخدام التفكيك وأنواع TypeScript عبر $props(). تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «$props() للخصائص ذات الأنواع»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- $props() للخصائص ذات الأنواع
- {#snippet} و {@render}
- تمرير snippets كخصائص
- snippets الافتراضية والمسمّاة