Typowane props i emits z defineProps/defineEmits
Generyczne defineProps (), złożone typy, opcjonalne props oraz typowanie emitów.
Typowane props i emits z defineProps/defineEmits to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Typowanie wejść i wyjść komponentu
Po dodaniu lang="ts" makra defineProps i defineEmits mogą bezpośrednio przyjmować typy TypeScriptu. Zapewnia to sprawdzanie podczas kompilacji danych przekazywanych do komponentu i z niego odbieranych.
Propsy z interfejsu
Typ należy przekazać jako parametr generyczny do defineProps. Interfejs ułatwia zachowanie czytelności i ponowne używanie złożonych struktur propsów.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Literały typów inline
W przypadku małych komponentów można użyć typu obiektu inline — osobny interfejs nie jest potrzebny.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Właściwości opcjonalne z ?
Właściwość można oznaczyć jako opcjonalną za pomocą ?. Opcjonalne propsy mają typ T | undefined, a komponent nadrzędny może je pominąć.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Złożone typy propsów
Propsy mogą być tablicami, uniami lub strukturami obiektów — wszystkim, co można wyrazić w TypeScript.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Wartości domyślne z withDefaults
Forma używająca wyłącznie typu nie może zawierać wartości domyślnych, dlatego należy opakować ją w withDefaults. Drugi argument mapuje nazwy propsów na wartości domyślne.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Wartości domyślne dla obiektów i tablic
Wartości domyślne obiektów i tablic muszą być zwracane przez funkcję fabryczną, tak jak w Options API, aby uniknąć współdzielenia jednej instancji między komponentami.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Deklarowanie typowanych zdarzeń
defineEmits może przyjąć typ zawierający każde zdarzenie i jego payload jako sygnaturę wywołania. Dzięki temu nieprawidłowe typy payloadów są wykrywane podczas kompilacji.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Emitowanie typowanych payloadów
Od tej pory emit akceptuje wyłącznie prawidłowe nazwy zdarzeń i pasujące typy payloadów. Przekazanie liczby w miejscu, w którym oczekiwany jest tekst, powoduje błąd kompilacji.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Składnia nazwanych krotek
Vue 3.3+ obsługuje skróconą składnię obiektową, w której każde zdarzenie jest mapowane na krotkę typów argumentów — jest to czytelniejsze niż sygnatury wywołań.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Propsy i zdarzenia razem
Typowy typowany komponent deklaruje oba elementy: wejścia za pomocą defineProps i wyjścia za pomocą defineEmits, sprawdzane od początku do końca.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Szybki test
Sprawdźmy wiedzę na temat typowanych propsów i zdarzeń.
Podsumowanie
Opanowano typowane wejścia i wyjścia komponentów:
- Przekazuj interfejs lub typ inline do defineProps<T>().
- Używaj ? dla opcjonalnych propsów i withDefaults dla wartości domyślnych (w przypadku obiektów i tablic używaj funkcji fabrycznej).
- defineEmits<T>() określa typy nazw zdarzeń i payloadów.
- Forma krotkowa (event: [payload]) to nowoczesna składnia skrócona.
Często zadawane pytania
Czy lekcja „Typowane props i emits z defineProps/defineEmits” jest bezpłatna?
Tak — pełny tekst „Typowane props i emits z defineProps/defineEmits” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Typowane props i emits z defineProps/defineEmits”?
Generyczne defineProps (), złożone typy, opcjonalne props oraz typowanie emitów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Typowane props i emits z defineProps/defineEmits”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja TypeScript w projektach Vue
- Typowane props i emits z defineProps/defineEmits
- Typowanie composable i refów
- Generyczne komponenty Vue