Skip to content

Commit 9375dac

Browse files
authored
Snippet typing docs should show the type
1 parent 73fa9d3 commit 9375dac

File tree

1 file changed

+11
-4
lines changed

1 file changed

+11
-4
lines changed

documentation/docs/03-template-syntax/06-snippet.md

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -228,22 +228,29 @@ Snippets implement the `Snippet` interface imported from `'svelte'`:
228228

229229
With this change, red squigglies will appear if you try and use the component without providing a `data` prop and a `row` snippet. Notice that the type argument provided to `Snippet` is a tuple, since snippets can have multiple parameters.
230230

231-
We can tighten things up further by declaring a generic, so that `data` and `row` refer to the same type:
231+
We can tighten things up further by declaring a Fruit type, so that `data` and `row` refer to the same type. Now a row snippet will error if the shape is not used.
232232

233233
```svelte
234-
<script lang="ts" generics="T">
234+
<script lang="ts">
235235
import type { Snippet } from 'svelte';
236236
237+
type Fruit = {
238+
name: string;
239+
qty: number;
240+
price: number;
241+
}
242+
237243
let {
238244
data,
239245
children,
240246
row
241247
}: {
242-
data: T[];
248+
data: Fruit[];
243249
children: Snippet;
244-
row: Snippet<[T]>;
250+
row: Snippet<[Fruit]>;
245251
} = $props();
246252
</script>
253+
247254
```
248255

249256
## Exporting snippets

0 commit comments

Comments
 (0)