Skip to content

optional component props with default value typescript regression #14974

@DanConwayDev

Description

@DanConwayDev

Describe the bug

In svelte 4 I could do this without any typescript errors:

// Component.svelte
<script lang="ts">
export let name: 'alice'|'bob' = 'alice';
</script>
<h1>{name} is {name.length} letters!</h1>

// +page.svelte
<Component />

In svelte 5 I do this:

// Component.svelte
<script lang="ts">
  let { name ='alice' }: {name: 'alice'|'bob'}  = $props();
</script>
<h1>{name} is {name.length} letters!</h1>

// +page.svelte
<Component />

but get a type error on +page.svelte:

Type '{ name: "alice"|"bob" }' is missing the following properties from type '$$ComponentProps': name

So i must do this to make the compiler happy:

// Component.svelte
<script lang="ts">
  let { name ='alice' }: {name?: 'alice'|'bob'}  = $props();
</script>
...
<h1>{name} is {name ? name.length | 0} letters!</h1>

// +page.svelte
<Component />

Am I missing something?

Reproduction

https://svelte.dev/playground/a560df440aff4b7db0f45c20bfcfc154?version=5.17.3

Logs

No response

System Info

System:
    OS: Linux 6.6 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (3) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 26.06 GB / 29.99 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.11.0 - /nix/store/fkyp1bm5gll9adnfcj92snyym524mdrj-nodejs-22.11.0/bin/node
    Yarn: 1.22.22 - ~/.nix-profile/bin/yarn
    npm: 10.9.0 - /nix/store/fkyp1bm5gll9adnfcj92snyym524mdrj-nodejs-22.11.0/bin/npm
    pnpm: 9.15.3 - /nix/store/p7r1k66dzs1qpkas0jx5v20asih9y37q-pnpm-9.15.3/bin/pnpm
  Browsers:
    Brave Browser: 131.1.73.104
  npmPackages:
    svelte: ^5.0.0 => 5.14.4

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions