Feature request: standard way to provide default prop values with TypeScript

[rodrigocfd]

Describe the problem

Currently, the only documented way to create default props is by destructuring them. While this is fine for small components, larger components benefit from using the props. prefix.

<script lang="ts">
const props: {
  name: string;
  age?: number; // how to give age a default value?
} = $props();
</script>

<div>{props.name}</div>
<div>{props.age}</div>

I mean, I can do this:

<script lang="ts">
interface Props {
  name: string;
  age?: number;
}

const defaultProps = {
  age: 40,
};

const props: Props = $props();
const props2 = {...defaultProps, ...props};
</script>

<div>{props2.name}</div>
<div>{props2.age}</div>

...which gives me the correct assignment and proper typing, but it's just an ugly React hack.

Describe the proposed solution

Vue 3 provides the withDefaults API, which is a rather elegant solution to the problem:

const props = withDefaults(defineProps<{
  name: string;
  age?: number;
}>(), {
  age: 40,
});

Something similar could be added to the Svelte runes API.

Importance

i cannot use svelte without it

[webJose]

The proposal I would see feasible would be:

<script lang="ts">
interface Props {
  name: string;
  age?: number;
}

const defaultProps = {
  age: 40,
};

const props: Props = $props(defaultProps);
</script>

<div>{props.name}</div>
<div>{props.age}</div>

The left-hand side should still be destructured if $bindable is required on any of the props.

[IcyFoxe]

I come from Vue and I also like accessing props through the props. prefix. Was a little bit disappointed when I found out that you can't define default props without using the destructuring assignment syntax.

I really like the proposal by @webJose. It's very clean and readable.

Edit: Though I wonder how would Svelte handle this kind of trickery, where you would define defaults both ways at once:
let { name, age = 30 } = $props({ age: 40 });