javascript / expert
Snippet
Typsichere generische Props in Svelte-Komponenten
Die Verwendung des $$Generic-Helpers in Svelte (TypeScript) ermöglicht es Komponenten, auf polymorphen Datenstrukturen zu arbeiten und gleichzeitig eine strikte Typprüfung für Props und Logik beizubehalten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script lang="ts">type T = $$Generic<Record<string, any>>;export let items: T[];export let filterKey: keyof T;$: filtered = items.filter(item => item[filterKey]);</script><ul>{#each filtered as item}<li>{item[filterKey]}</li>{/each}</ul>
svelte
Erklärung
1
type T = $$Generic<Record<string, any>>;
Deklariert einen generischen Platzhalter-Typ, der aus den an die Komponente übergebenen Elementen abgeleitet wird.
2
keyof T
Stellt sicher, dass die Prop 'filterKey' ein gültiger Eigenschaftsname des generischen Typs T sein muss.
3
$: filtered = ...
Erstellt eine reaktive Anweisung, die die Filterlogik neu ausführt, wenn sich 'items' oder 'filterKey' ändern.