How can I iterate over an array in a Svelte store?

Question

I have an array in store.ts

export let annotations = writable(new Array<Annotation>());

And I'd like to iterate over the array, in component.svelte:

<script lang="ts">
  import { annotations } from '../store';
</script>

<section>
  {#each annotations as highlight, index}
    ...
  {/each}
</section>

This fails with:

Argument of type 'Writable<Annotation[]>' is not assignable to parameter of type 'ArrayLike'

Which makes sense - The Writable object isn't a regular Array, it's a Writable.

How can I iterate over an array in a Svelte store?

Answer 1

Iteration over the array, in component.svelte:

<script lang="ts">
  import { annotations } from '../store';
</script>

<section>
  {#each $annotations as highlight, index}
    ...
  {/each}
</section>

More info