Sveltejs Academy · Lektion

$props() för typade props

Deklarera komponentprops med destrukturering och TypeScript-typer med hjälp av $props().

Lektion 1 av 413 steg

$props() för typade props är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Nytt props-API

Svelte 5 introducerar $props() för att deklarera komponentprops som en destrukturerad tilldelning.

Grundläggande användning

Destrukturera props i ett enda uttryck.

let { name, count = 0 } = $props();

Standardvärden

Standardvärden använder standardmässiga destruktureringsstandardvärden.

let { theme = "dark" } = $props();

Obligatoriska props

Props utan standardvärde är obligatoriska. TypeScript kan tvinga fram detta i typat läge.

Typade props

Lägg till en TypeScript-generisk typ för fullständig typsäkerhet.

let { name, count = 0 }: { name: string; count?: number } = $props();

Rest-props

Fånga återstående props med rest-syntax.

let { name, ...rest } = $props();

children och snippets

Egenskapen children innehåller standardinnehållet från slotten som en snippet.

let { children } = $props();

Inget mer export let

$props() ersätter den gamla syntaxen export let i Svelte 5.

Reaktiv

Props uppdateras reaktivt när den överordnade komponenten skickar nya värden.

Vidarebefordran med spread

Vidarebefordra rest-props till inre element med objektsyntaxen spread.

<input {...rest} />

Bakåtkompatibilitet

export let fungerar fortfarande under migreringen; blanda syntaxerna gradvis.

Snabbtest

Hur deklarerar Ni props i Svelte 5?

Besvara frågan i den interaktiva lektionen

Sammanfattning

$props() är det nya props-API:t i Svelte 5. Destrukturera med standardvärden och typer för rena och säkra komponenter.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”$props() för typade props” gratis?

Ja – hela texten till ”$props() för typade props” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”$props() för typade props”?

Deklarera komponentprops med destrukturering och TypeScript-typer med hjälp av $props(). Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”$props() för typade props”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Sveltejs Academy