defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler
Genel tanımlı defineProps (), karmaşık türler, isteğe bağlı props'lar ve emit türleri.
defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Bileşen Girdilerinin ve Çıktılarının Türlerini Belirleme
lang="ts" ile defineProps ve defineEmits makroları TypeScript türlerini doğrudan kabul eder. Bu, bir bileşene giren ve bileşenden çıkan veriler için derleme zamanında denetim sağlar.
Bir Arayüzden Props Oluşturma
defineProps genel türüne bir tür aktarın. Bir arayüz, karmaşık prop yapılarını okunabilir ve yeniden kullanılabilir tutar.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Satır İçi Tür Değişmezleri
Küçük bileşenler için satır içi bir nesne türü yeterlidir; ayrı bir arayüze gerek yoktur.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>? ile İsteğe Bağlı Özellikler
Bir özelliği ? ile isteğe bağlı olarak işaretleyin. İsteğe bağlı prop'lar T | undefined türünde olur ve üst bileşen bunları vermeyebilir.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Karmaşık Prop Türleri
Prop'lar diziler, birleşimler veya nesne şekilleri olabilir; TypeScript'in ifade edebildiği her şey kullanılabilir.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>withDefaults ile Varsayılanlar
Yalnızca tür belirten biçim varsayılan değerleri içeremez; bu nedenle onu withDefaults içine sarın. İkinci bağımsız değişken, prop adlarını varsayılan değerlere eşler.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Nesneler ve Diziler için Varsayılanlar
Nesne ve dizi varsayılanları, Options API'de olduğu gibi bir fabrika işlevinden döndürülmelidir; böylece bileşenler arasında tek bir örneğin paylaşılması önlenir.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Tür Bilgili Emit'leri Tanımlama
defineEmits, her olayı ve yükünü bir çağrı imzası olarak listeleyen bir tür alabilir. Bu, yanlış yük türlerini derleme zamanında yakalar.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Tür Bilgili Yükler Gönderme
Artık emit yalnızca geçerli olay adlarını ve bunlara uyan yük türlerini kabul eder. Bir dize beklenirken sayı göndermek derleme hatasına neden olur.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}Adlandırılmış Demet Sözdizimi
Vue 3.3 ve sonraki sürümler, her olayın bağımsız değişken türlerinden oluşan bir demete eşlendiği kısa nesne biçimini destekler; bu, çağrı imzalarından daha temizdir.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props ve Emit'leri Birlikte Kullanma
Tipik bir tür bilgili bileşen her ikisini de tanımlar: defineProps ile girdiler ve defineEmits ile çıktılar; bunların tümü uçtan uca denetlenir.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Hızlı Sınama
Tür bilgili prop'lar ve emit'ler hakkındaki bilginizi sınayın.
Özet
Tür bilgili bileşen G/Ç'sini öğrendiniz:
- defineProps<T>() işlevine bir arayüz veya satır içi tür aktarın.
- İsteğe bağlı prop'lar için ? ve varsayılanlar için withDefaults kullanın (nesneler/diziler için fabrika işlevi).
- defineEmits<T>(), olay adlarının ve yüklerinin türlerini belirler.
- Demet biçimi (event: [payload]) modern kısa gösterimdir.
Sıkça Sorulan Sorular
“defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler” dersi ücretsiz mi?
Evet — “defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler” dersinde ne öğreneceğim?
Genel tanımlı defineProps (), karmaşık türler, isteğe bağlı props'lar ve emit türleri. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vue Projelerinde TypeScript Kurulumu
- defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler
- Composable'ları ve Ref'leri Türlendirme
- Genel Amaçlı Vue Bileşenleri