Separate prop declarations in runes mode

[angryziber]

Describe the problem

The biggest downside of Svelte 5 compared to 4 is inability to declare props independently, each with it's type (yes, TypeScript) and default value. If you have many props in a generic component, most of them with default values, this gets pretty messy with $props().

Without runes you can write (clean):

<script lang="ts">
  export let name: string
  export let age: number = 10 // or you can even omit a type here and TS will still derive it
  // easy to add more props independently of other ones
<script>

With runes, it is no longer possible to declare both prop type and default value at the same time (messy, like in React):

<script lang="ts>
  let {
    name, 
    age = 10
  }: {
   name: string,
   age: number
  } = $props()
</script>

And the worst thing is that you can omit the type declaration if all of the props have default values (and TS will figure the types), but as long as you add a single prop without a default value, you are forced to type all the props.

Describe the proposed solution

As a solution it would be good to have a way to declare types one by one in rune mode, like

<script lang="ts">
  let name = $prop<string>()
  let age = $prop(3)
  let bindMe = $bindable<number>()
</script>

This will be consistent with $state() and also will allow TS to optionally declare or derive type of each prop independently from others. This will make complex prop declarations much cleaner if type-safety is desired (a very good idea for any bigger/important project).

Btw, $bindable() already exists and allows specifying of type of property at the declaration place, so the same functionaility is desired for non-bindable props.

Importance

I refuse to use runes without it

[brunnerh]

This proposal has been rejected previously, see lengthy discussion in:

• Add a (singular) $prop rune #9241