typescriptsveltesvelte-5svelte-runes

How to assign default prop values with Svelte 5 and TypeScript?

Suppose I have the following Svelte 5 component:

<script lang="ts">
  const props: {
    name: string;
    age?: number;
  } = $props();
</script>

<div>Name: {props.name}</div>
<div>Age: {props.age}</div>

I want props.age to have the default value of 40.

How can I do that, while keeping the props. prefix to access the values?

Solution

  • I found that, as of December 2024, there is no standard way to to this.

    I opened an issue at Svelte repo, and I will update this answer if the Svelte team publishes something.