I would like to define my custom component and specify which kind of "standard component" I would to extend.
This to consume VSCode intellisense for all standard attributes of the extended component without re-define all attributes.
This is what I would to do:
<script lang="ts">
// Error: Cannot redeclare block-scoped variable '$$props'
export let $$props: svelte.JSX.HTMLAttributes<HTMLButtonElement>;
// OR
// Error: Cannot redeclare block-scoped variable '$$restProps'
export let $$restProps: svelte.JSX.HTMLAttributes<HTMLButtonElement>;
export let myCustomProp: string;
</script>
<button {...$$restProps}>{myCustomProp}<slot /></button>
To explain better what I would like to do, I post the same case in React with Typescript:
import React from 'react';
type Props = {
myCustomProp: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
export default function ({ myCustomProp, ...rest }: Props) {
return (
<button {...rest}>
{myCustomProp}
{rest.children}
</button>
);
}
Use the svelte/elements
to provide an interface $$Props
that extends the specific HTML element you want to type.
Button.svelte
:
<script lang="ts">
import type { HTMLButtonAttributes } from 'svelte/elements'
interface $$Props extends HTMLButtonAttributes {
myCustomProp: string
}
export let myCustomProp: string
</script>
<button {...$$restProps}>
{myCustomProp}
<slot />
</button>
+page.svelte
:
<script lang="ts">
import Button from './Button.svelte'
let disabled = false
</script>
<Button myCustomProp='foo' {disabled}>Click Me</Button>
EDIT: If you are dealing with more complex types you could us the typing you defined in $$Props
in your exported props:
export let myCustomProp: $$Props["myCustomProp"]