Mini-cas : persistance des données (JS vs TS)

Ajouter et retirer des articles, le tout conservé après rechargement. localStorage + runes font le duo parfait.

Sans TS, le JSON relu reste un inconnu jusqu’au premier map().
Avec lang="ts", Article[] décrit la forme stockée et relue.
Le template {#each} est identique : seule la couche de types change.

src/lib/PanierPersiste.sveltesvelte

<script>
  let panier = $state([])

  $effect(() => {
    panier = JSON.parse(localStorage.getItem('panier') ?? '[]')
  })

  function ajouter(article) {
    panier.push(article)
    localStorage.setItem('panier', JSON.stringify(panier))
  }

  function vider() {
    panier = []
    localStorage.removeItem('panier')
  }
</script>

<ul>
  {#each panier as a (a.nom)}
    <li>{a.nom} — {a.prix} €</li>
  {/each}
</ul>
<button onclick={() => ajouter({ nom: 'Livre', prix: 12 })}>Ajouter</button>
<button onclick={vider}>Vider</button>