$props() for Typed Props
Declare component props with destructuring and TypeScript types using $props().
$props() for Typed Props is a free Sveltejs Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
New Props API
Svelte 5 introduces $props() to declare component props as destructured assignment.
Basic Use
Destructure props in one expression.
let { name, count = 0 } = $props();Default Values
Default values use standard destructuring defaults.
let { theme = "dark" } = $props();Required Props
Props without a default are required. TypeScript can enforce this in typed mode.
Typed Props
Add a TypeScript generic for full type safety.
let { name, count = 0 }: { name: string; count?: number } = $props();Rest Props
Capture remaining props with rest syntax.
let { name, ...rest } = $props();Children and Snippets
The children property holds default slot content as a snippet.
let { children } = $props();No More export let
$props() replaces the old export let syntax in Svelte 5.
Reactive
Props update reactively when the parent passes new values.
Spread Forwarding
Forward rest props onto inner elements using object spread.
<input {...rest} />Backward Compat
export let still works during migration; mix gradually.
Quick Check
How do you declare props in Svelte 5?
Recap
$props() is the new Svelte 5 props API. Destructure with defaults and types for clean, safe components.
Frequently asked questions
Is the “$props() for Typed Props” lesson free?
Yes — the full text of “$props() for Typed Props” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “$props() for Typed Props”?
Declare component props with destructuring and TypeScript types using $props(). You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “$props() for Typed Props” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- $props() for Typed Props
- {#snippet} and {@render}
- Passing Snippets as Props
- Default and Named Snippets