$props() per props tipizzate
Dichiari le props dei componenti con destrutturazione e tipi TypeScript usando $props().
$props() per props tipizzate è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 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 Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Nuova API per le props
Svelte 5 introduce $props() per dichiarare le props dei componenti tramite un'assegnazione destrutturata.
Utilizzo di base
Destrutturi le props in un'unica espressione.
let { name, count = 0 } = $props();Valori predefiniti
I valori predefiniti utilizzano le normali impostazioni predefinite della destrutturazione.
let { theme = "dark" } = $props();Props obbligatorie
Le props senza un valore predefinito sono obbligatorie. TypeScript può imporlo in modalità tipizzata.
Props tipizzate
Aggiunga un generico TypeScript per ottenere la completa sicurezza dei tipi.
let { name, count = 0 }: { name: string; count?: number } = $props();Props rest
Raccolga le props rimanenti con la sintassi rest.
let { name, ...rest } = $props();Children e snippet
La proprietà children contiene il contenuto dello slot predefinito sotto forma di snippet.
let { children } = $props();Niente più export let
$props() sostituisce la vecchia sintassi export let in Svelte 5.
Reattività
Le props si aggiornano in modo reattivo quando il componente padre passa nuovi valori.
Inoltro con spread
Inoltri le props rest agli elementi interni utilizzando lo spread di oggetti.
<input {...rest} />Compatibilità all'indietro
export let continua a funzionare durante la migrazione; lo introduca gradualmente insieme alla nuova sintassi.
Verifica rapida
Come si dichiarano le props in Svelte 5?
Riepilogo
$props() è la nuova API delle props di Svelte 5. Le destrutturi con valori predefiniti e tipi per creare componenti chiari e sicuri.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «$props() per props tipizzate» è gratuita?
Sì — il testo completo di «$props() per props tipizzate» è 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 Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «$props() per props tipizzate»?
Dichiari le props dei componenti con destrutturazione e tipi TypeScript usando $props(). Eserciti Sveltejs 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 Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs 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 1 di 4.
Quanto tempo richiede la lezione «$props() per props tipizzate»?
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 Sveltejs Academy?
Sì. Ogni lezione Sveltejs 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
- $props() per props tipizzate
- {#snippet} e {@render}
- Passaggio degli snippet come props
- Snippet predefiniti e denominati