How to type ...props when 'spread' event handlers

[J4gQBqqR]

	let {
		icon = "line-md:close",
		button_style = "",
		icon_style = "text-2xl",
		children,
		...props,
	}: {
		icon: string;
		button_style: string;
		icon_style?: string;
		children?: Snippet;
		...props?: any;  // <= what is the correct syntax here to type it?
	} = $props();

Thank you for your help!

[brunnerh]

Depends on how the props are used.
E.g. if they are passed on to an element, you can intersect the declared props with a type from svelte/elements.

import type { HTMLButtonAttributes } from 'svelte/elements';
let {
	icon = "line-md:close",
	button_style = "",
	icon_style = "text-2xl",
	children,
	...props
}: {
	icon: string;
	button_style: string;
	icon_style?: string;
	children?: Snippet;
} & HTMLButtonAttributes = $props();

If you only want to allow events (limited by the prefix on), you can define an index like this:

let { /*...*/ }: {
	icon: string;
	button_style: string;
	icon_style?: string;
	children?: Snippet;
	[key: `on${string}`]: Function;
} = $props();

Expand the types to [key: string]: any to allow any other additional property.