Props ed emit tipizzati con defineProps/defineEmits
defineProps () generico, tipi complessi, props opzionali, tipizzazione degli emit.
Props ed emit tipizzati con defineProps/defineEmits è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Tipizzare gli input e gli output dei componenti
Con lang="ts", le macro defineProps e defineEmits accettano direttamente i tipi TypeScript. In questo modo ottenete controlli in fase di compilazione sui dati che entrano ed escono da un componente.
Props da un'interfaccia
Passate un tipo al generico di defineProps. Un'interface mantiene leggibili e riutilizzabili le strutture complesse delle props.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>Tipi literal inline
Per i componenti piccoli va bene un tipo oggetto inline: non serve un'interfaccia separata.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>Proprietà opzionali con ?
Indicate una proprietà opzionale con ?. Le props opzionali hanno tipo T | undefined e il componente padre può ometterle.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>Tipi complessi per le props
Le props possono essere array, unioni o strutture oggetto: qualsiasi tipo esprimibile con TypeScript.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>Valori predefiniti con withDefaults
La forma basata solo sui tipi non può contenere valori predefiniti, quindi racchiudetela in withDefaults. Il secondo argomento associa i nomi delle props ai valori predefiniti.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>Valori predefiniti per oggetti e array
I valori predefiniti per oggetti e array devono essere restituiti da una funzione factory, proprio come nella Options API, per evitare di condividere la stessa istanza tra più componenti.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})Dichiarare eventi tipizzati
defineEmits può ricevere un tipo che elenca ogni evento e il relativo payload come firma di chiamata. In questo modo i tipi errati dei payload vengono rilevati in fase di compilazione.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>Emettere payload tipizzati
Ora emit accetta solo nomi di eventi validi e payload del tipo corrispondente. Passare un numero dove è prevista una stringa genera un errore di compilazione.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}La sintassi delle tuple con nomi
Vue 3.3+ supporta una forma abbreviata a oggetto in cui ogni evento è associato a una tuple dei tipi dei suoi argomenti, più chiara delle firme di chiamata.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props ed eventi insieme
Un componente tipizzato tipico dichiara entrambi: gli input tramite defineProps e gli output tramite defineEmits, con controlli completi da un'estremità all'altra.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>Verifica rapida
Verificate la vostra conoscenza delle props e degli eventi tipizzati.
Riepilogo
Avete imparato a tipizzare l'I/O dei componenti:
- Passate un'interfaccia o un tipo inline a defineProps<T>().
- Usate ? per le props opzionali e withDefaults per i valori predefiniti (una factory per oggetti e array).
- defineEmits<T>() tipizza i nomi degli eventi e i payload.
- La forma a tuple (event: [payload]) è la sintassi abbreviata moderna.
Domande Frequenti
La lezione «Props ed emit tipizzati con defineProps/defineEmits» è gratuita?
Sì — il testo completo di «Props ed emit tipizzati con defineProps/defineEmits» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Props ed emit tipizzati con defineProps/defineEmits»?
defineProps () generico, tipi complessi, props opzionali, tipizzazione degli emit. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Props ed emit tipizzati con defineProps/defineEmits»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di TypeScript nei progetti Vue
- Props ed emit tipizzati con defineProps/defineEmits
- Tipizzazione di composable e ref
- Componenti Vue generici