Typisierte Props und Emits mit defineProps/defineEmits
Generisches defineProps (), komplexe Typen, optionale Props und typisierte Emits
Typisierte Props und Emits mit defineProps/defineEmits ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Komponenteneingaben und -ausgaben typisieren
Mit lang="ts" akzeptieren die Makros defineProps und defineEmits TypeScript-Typen direkt. Dadurch wird zur Kompilierzeit geprüft, welche Daten in eine Komponente hinein- und aus ihr herausfließen.
Props aus einem Interface
Übergeben Sie dem Generic von defineProps einen Typ. Ein Interface hält komplexe Prop-Strukturen übersichtlich und wiederverwendbar.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Inline-Typliterale
Für kleine Komponenten genügt ein Inline-Objekttyp – ein separates Interface ist nicht erforderlich.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Optionale Eigenschaften mit ?
Kennzeichnen Sie eine Eigenschaft mit ? als optional. Optionale Props werden als T | undefined typisiert, und die übergeordnete Komponente kann sie weglassen.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Komplexe Prop-Typen
Props können Arrays, Unions oder Objektstrukturen sein – alles, was TypeScript ausdrücken kann.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Standardwerte mit withDefaults
Die rein typbasierte Form kann keine Standardwerte enthalten. Umschließen Sie sie daher mit withDefaults. Das zweite Argument ordnet Prop-Namen ihre Standardwerte zu.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Standardwerte für Objekte und Arrays
Standardwerte für Objekte und Arrays müssen wie bei der Options API aus einer Factory-Funktion zurückgegeben werden, damit nicht eine Instanz von mehreren Komponenten gemeinsam verwendet wird.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Typisierte Emits deklarieren
defineEmits kann einen Typ aufnehmen, der jedes Ereignis und seine Nutzdaten als Call-Signatur aufführt. Dadurch werden falsche Nutzdatentypen bereits zur Kompilierzeit erkannt.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Typisierte Nutzdaten senden
Nun akzeptiert emit nur gültige Ereignisnamen und die jeweils passenden Nutzdatentypen. Wenn eine Zahl übergeben wird, obwohl ein String erwartet wird, tritt ein Kompilierfehler auf.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Die Syntax für benannte Tupel
Vue 3.3+ unterstützt eine verkürzte Objektform, bei der jedes Ereignis einem Tupel seiner Argumenttypen zugeordnet wird – übersichtlicher als Call-Signaturen.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props und Emits gemeinsam
Eine typische typisierte Komponente deklariert beides: Eingaben über defineProps und Ausgaben über defineEmits, vollständig von Anfang bis Ende geprüft.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Schnelltest
Testen Sie Ihr Wissen über typisierte Props und Emits.
Zusammenfassung
Sie haben typisierte Komponentenein- und -ausgaben kennengelernt:
- Übergeben Sie defineProps<T>() ein Interface oder einen Inline-Typ.
- Verwenden Sie ? für optionale Props und withDefaults für Standardwerte (bei Objekten/Arrays eine Factory verwenden).
- defineEmits<T>() typisiert Ereignisnamen und Nutzdaten.
- Die Tupelform (event: [payload]) ist die moderne Kurzschreibweise.
Häufig gestellte Fragen
Ist die Lektion „Typisierte Props und Emits mit defineProps/defineEmits“ kostenlos?
Ja — der vollständige Text von „Typisierte Props und Emits mit defineProps/defineEmits“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Typisierte Props und Emits mit defineProps/defineEmits“?
Generisches defineProps (), komplexe Typen, optionale Props und typisierte Emits Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Typisierte Props und Emits mit defineProps/defineEmits“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- TypeScript-Einrichtung in Vue-Projekten
- Typisierte Props und Emits mit defineProps/defineEmits
- Composables und Refs typisieren
- Generische Vue-Komponenten