How to use TypeScript with restProps in Svelte 5 without errors?

[unikitty37]

$$restProps is deprecated in Svelte 5, and the documentation gives this as the alternative:

If you're using TypeScript, you can use type arguments:

let { a, b, c, ...everythingElse } = $props<MyProps>();

but unfortunately doesn't include the definition of the MyProps type. I have this:

  type ButtonProps = {
    theme?: 'primary' | 'secondary'
    restProps: any
  }
  let { theme, ...restProps } = $props<ButtonProps>()

but when I invoke the component like this:

<CustomButton theme="primary" disabled="{formDisabled}">Sign In</CustomButton>

I get the error "Object literal may only specify known properties, and 'children' does not exist in type 'ButtonProps'. ts(2353)". The component still works as expected, but I'd like to have a CI process that rejects commits that generate TypeScript errors :)

What should I be putting here?

[brunnerh]

• restProps is not a single property, it is the combination of all properties that have not been listed.
  In some scenarios that does not need to be declared explicitly, but essentially it would be a key signature.
• You pass content to the component which implicitly sets a children snippet property that you have not declared.

Try something like:

type ButtonProps = {
  theme?: 'primary' | 'secondary',
  children: Snippet, // from `'svelte'`
  [key: string]: any, // for all other properties
}

[unikitty37]

That's fixed it — thanks!

[lukas-kasticky]

Any reasons not to do this? You even get IntelliSense this way.

let {
  theme,
  ...rest,
}: {
  theme?: 'primary' | 'secondary';
} & HTMLButtonAttributes = $props();

[unikitty37]

Thanks — that's easier to read, too :)