language-tools
language-tools copied to clipboard
Event handlers types not working properly in <svelte:element> unless a prop is explicitly specified
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:
It seems to be working fine except when using an event handler, I get this error:
Parameter 'e' implicitly has an 'any' type.
However when explicitly setting href to undefined it works fine:
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