Handling multiple event handlers in components with typescript

[ananduremanan]

Hi there,

When creating a component with typescript, do I need to specify every event handlers and it's type?

for eg: In my button component

<script lang="ts">
	import { twMerge } from 'tailwind-merge';

	interface ButtonProps {
		href?: string;
		disabled?: boolean;
		target?: string;
		outline?: boolean;
		children?: any;
	}

	let {
		href = '',
		disabled = false,
		target = '',
		outline = false,
		children,
		...props
	}: ButtonProps = $props();

	let defaultStyle = `${!outline ? 'bg-blue-500 text-white hover:bg-blue-400' : 'border text-black hover:bg-blue-500 hover:text-white'}  p-2 rounded-lg text-sm`;
</script>

{#if href}
	<a {href} class={twMerge(defaultStyle)} {target} {...props}>{@render children()}</a>
{:else}
	<button class={twMerge(defaultStyle)} {disabled} {...props}>{@render children()}</button>
{/if}

I passed {...props} for handling multiple event handlers and when I use the component

<script>
	import '../app.css';
	import Button from '$lib/button/Button.svelte';

	let x = $state(0);
</script>

<div class="min-h-screen flex justify-center items-center">
	<Button
		onclick={() => {
			console.log('hello nithya');
		}}>Hello Nithya</Button
	>
</div>

I'm getting a type error Object literal may only specify known properties, and '"onclick"' does not exist in type 'ButtonProps'
and this is so annoying and it was easy with svelte 4

<script lang="ts">
	import { twMerge } from 'tailwind-merge';

	export let href: string = '';
	export let disabled: boolean = false;
	export let target: string = '';
	export let outline: boolean = false;

	let defaultStyle = `${!outline ? 'bg-blue-500 text-white hover:bg-blue-400' : 'border text-black hover:bg-blue-500 hover:text-white'}  p-2 rounded-lg text-sm`;
</script>

{#if href}
	<a {href} class={twMerge(defaultStyle, $$props.class)} {target}><slot /></a>
{:else}
	<button
		{...$$restProps}
		class={twMerge(defaultStyle, $$props.class)}
		{disabled}
		on:click
		on:change
		on:keydown
		on:keyup
		on:touchstart|passive
		on:touchend
		on:touchcancel
		on:mouseenter
		on:mouseleave><slot /></button
	>
{/if}

and I don't know how to use $$props.class) in svelte 5 as well. BTW thanks for making me hate svelte with svelte 5.

[brunnerh]

• The types of props can be intersected with attribute definitions from svelte/elements, which include all the event handlers, in this case HTMLButtonAttributes so e.g. let { ... }: ButtonProps & HTMLButtonAttributes = $props();; alterniatevly define it as a separate type/make ButtonProps extend the attrbutes.
• class can be aliased on destructuring if you need it as a separate property, but in your first example it would just be part of the rest object, i.e. rest.class.

  // aliasing a property:
  let { class: className } = $props();
  
  // if you don't need bindings, keeping a single object is also possible:
  let props = $props();