خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits
Generic defineProps ()، والأنواع المعقدة، وProps الاختيارية، وكتابة أنواع Emit
خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
تحديد أنواع مدخلات ومخرجات المكوّنات
مع lang="ts"، تقبل وحدتا الماكرو defineProps وdefineEmits أنواع TypeScript مباشرةً. ويوفّر ذلك فحوصًا وقت التجميع للبيانات الداخلة إلى المكوّن والخارجة منه.
الخصائص من واجهة
مرّروا نوعًا إلى النوع العام في defineProps. وتحافظ الواجهة على قابلية قراءة أشكال الخصائص المعقّدة وإعادة استخدامها.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>تعريفات الأنواع المضمّنة
بالنسبة إلى المكوّنات الصغيرة، يكفي استخدام نوع كائن مضمّن — ولا حاجة إلى واجهة منفصلة.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>الخصائص الاختيارية باستخدام ?
اجعلوا الخاصية اختيارية باستخدام ?. وتُحدَّد أنواع الخصائص الاختيارية على أنها T | undefined، ويمكن للمكوّن الأب حذفها.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>أنواع الخصائص المعقّدة
يمكن أن تكون الخصائص مصفوفات أو اتحادات أو أشكال كائنات — أي شيء يمكن لـTypeScript التعبير عنه.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>القيم الافتراضية باستخدام withDefaults
لا يمكن للصيغة التي تحتوي على النوع فقط أن تتضمّن قيمًا افتراضية، لذا لفّوها داخل withDefaults. وتربط الوسيطة الثانية أسماء الخصائص بقيمها الافتراضية.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>القيم الافتراضية للكائنات والمصفوفات
يجب إرجاع القيم الافتراضية للكائنات والمصفوفات من دالة مصنع، كما في Options API، لتجنّب مشاركة النسخة نفسها بين المكوّنات.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})تعريف الأحداث محددة النوع
يمكن أن تتلقّى defineEmits نوعًا يسرد كل حدث والحمولة الخاصة به على هيئة توقيع استدعاء. ويكشف ذلك أنواع الحمولات الخاطئة وقت التجميع.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>إرسال حمولات محددة النوع
لا تقبل emit الآن إلا أسماء الأحداث الصحيحة وأنواع الحمولات المطابقة. ويؤدي تمرير رقم حيث يُتوقّع نص إلى خطأ في التجميع.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}صيغة الصفوف المسماة
تدعم Vue 3.3 والإصدارات الأحدث صيغة كائن مختصرة، حيث يُربط كل حدث بـصف من أنواع وسائطه — وهي أوضح من توقيعات الاستدعاء.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>الخصائص والأحداث معًا
يعرّف المكوّن محدد النوع عادةً كليهما: المدخلات عبر defineProps والمخرجات عبر defineEmits، مع فحص كامل من البداية إلى النهاية.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>اختبار سريع
اختبروا معرفتكم بالخصائص والأحداث محددة النوع.
مراجعة
لقد تعلّمتم تحديد أنواع مدخلات ومخرجات المكوّنات:
- مرّروا واجهة أو نوعًا مضمّنًا إلى defineProps<T>().
- استخدموا ? للخصائص الاختيارية وwithDefaults للقيم الافتراضية (مع استخدام مصنع للكائنات والمصفوفات).
- تحدّد defineEmits<T>() أنواع الأحداث والحمولات.
- صيغة الصفوف (event: [payload]) هي الاختصار الحديث.
الأسئلة الشائعة
هل درس «خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits» مجاني؟
نعم — نص درس «خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits»؟
Generic defineProps ()، والأنواع المعقدة، وProps الاختيارية، وكتابة أنواع Emit تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد TypeScript في مشاريع Vue
- خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits
- كتابة أنواع Composables وRefs
- مكوّنات Vue العامة