Skip to content
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion documentation/docs/07-misc/03-typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ The content of `generics` is what you would put between the `<...>` tags of a ge

## Typing wrapper components

In case you're writing a component that wraps a native element, you may want to expose all the attributes of underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:
In case you're writing a component that wraps a native element, you may want to expose all the attributes of the underlying element to the user. In that case, use (or extend from) one of the interfaces provided by `svelte/elements`. Here's an example for a `Button` component:

```svelte
<script lang="ts">
Expand All @@ -146,6 +146,20 @@ In case you're writing a component that wraps a native element, you may want to
</button>
```

Not all elements have a specific type definition, in those cases, use `SvelteHTMLElements`:

```svelte
<script lang="ts">
import type { SvelteHTMLElements } from 'svelte/elements';

let { children, ...rest }: SvelteHTMLElements['div'] = $props();
</script>

<div {...rest}>
{@render children()}
</div>
```

## Typing `$state`

You can type `$state` like any other variable.
Expand Down
Loading