language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

Event handlers types not working properly in <svelte:element> unless a prop is explicitly specified

Open alialaa opened this issue 1 year ago • 0 comments

Describe the bug

I am creating a Button component where it can be an html button element or an anchor tag based on whether an href prop is passed or not. I am typing my props like so:

Screenshot 2024-11-18 at 5 25 00 PM

It seems to be working fine except when using an event handler, I get this error: Parameter 'e' implicitly has an 'any' type.

Screenshot 2024-11-18 at 5 25 09 PM

However when explicitly setting href to undefined it works fine:

Screenshot 2024-11-18 at 5 25 30 PM

Reproduction

I believe everything is provided in the screenshots but here's the code as text:

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

	type Props = (
		| (HTMLButtonAttributes & { href?: never })
		| (HTMLAnchorAttributes & { href: string })
	) & {
		children: Snippet;
	};

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

<svelte:element this={props.href ? 'a' : 'button'} class="button" {...props}>
	{@render children()}
</svelte:element>

Expected behaviour

I expect that passing href={undefined} should not be required.

System Info

System:
   OS: macOS 15.1
   CPU: (12) arm64 Apple M3 Pro
   Memory: 97.98 MB / 18.00 GB
   Shell: 5.9 - /bin/zsh
 Binaries:
   Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
   npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
 Browsers:
   Chrome: 130.0.6723.117
   Safari: 18.1
 npmPackages:
   svelte: ^5.0.0 => 5.2.2 

Which package is the issue about?

No response

Additional Information, eg. Screenshots

No response

alialaa avatar Nov 18 '24 15:11 alialaa