Svelte 5: docs example of how to declare rest props results in TS error

[nmzein]

Describe the bug

Attempting to follow the docs in how rest props are declared, i.e.:

interface MyProps {
	required: string;
	optional?: number;
	partOfEverythingElse?: boolean;
};

let { required, optional, ...everythingElse }: MyProps = $props();

This error is displayed Object literal may only specify known properties, and '"onclick"' does not exist in type '$$ComponentProps'.ts(2353)

Reproduction

This is what I was trying to do:

<!-- Parent.svelte -->
<script lang="ts">
    import Button from './Button.svelte';
</script>

<!-- Object literal may only specify known properties, and '"onclick"' does not exist in type '$$ComponentProps'. -->
<Button onclick={() => console.log('This works')}>Children</Button>

<!-- Button.svelte -->
<script lang="ts">
    import type { Snippet } from 'svelte';

    let { children, ...restProps }: { children: Snippet } = $props();
</script>

<button {...restProps}>{@render children()}</button>

Would be nice to have some clarity on how rest props are to be used if the above example isn't correct.

Logs

No response

System Info

System:
    OS: Linux 6.9 Fedora Linux 40 (Workstation Edition)
    CPU: (8) x64 Intel(R) Core(TM) i5-1035G7 CPU @ 1.20GHz
    Memory: 1.81 GB / 7.35 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.12.2 - /usr/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/bin/npm
    pnpm: 9.4.0 - /usr/local/bin/pnpm
  npmPackages:
    svelte: 5.0.0-next.193 => 5.0.0-next.193

Severity

annoyance

[brunnerh]

The example is technically correct, but given the type definition, everythingElse only contains the property partOfEverythingElse?: boolean; since nothing else is included in the type except the explicitly destructured props and that.

If you want to support event handlers, you can intersect the explicitly declared props with a type from svelte/elements, e.g. in this case HTMLButtonAttributes.

<script lang="ts">
    import type { Snippet } from 'svelte';
    import type { HTMLButtonAttributes } from 'svelte/elements';

    type Props = {
        children: Snippet;
    } & HTMLButtonAttributes;

    let { children, ...restProps }: Props = $props();
</script>

<button {...restProps}>{@render children()}</button>

[nmzein]

Awesome, makes a lot of sense thanks.

[rChaoz]

Also, this is documented under 'Imports', but it could maybe mentioned somewhere else too

[nmzein]

Maybe have a quick note and link under the props rune to the more advanced use cases? Keeps the more advanced stuff neatly tucked elsewhere but also acts as a single place to get all info on prop semantics.

[vladshcherbin]

This one is mentioned in Type-safety and has a dedicated Typing wrapper components section.

The issue should be probably closed.