Une barre de recherche filtre une liste de produits grâce aux runes. La logique est identique : seule la couche de types change.
- Sans TS, produits est un tableau non typé : aucune garantie sur p.nom.
- Avec lang="ts", l’interface Produit et $derived garantissent le filtre.
- Le template ({#each}) est strictement identique dans les deux versions.
src/lib/RechercheListe.sveltesvelte
<script>
let produits = $state([
{ nom: 'Livre', prix: 12 },
{ nom: 'Cahier', prix: 3 },
{ nom: 'Stylo', prix: 2 }
])
let recherche = $state('')
const trouves = $derived(
produits.filter((p) =>
p.nom.toLowerCase().includes(recherche.toLowerCase())
)
)
</script>
<input bind:value={recherche} type='search' placeholder='Filtrer…' />
<p>{trouves.length} résultat(s)</p>
<ul>
{#each trouves as p (p.nom)}
<li>{p.nom} — {p.prix} €</li>
{/each}
</ul>