Search code examples
typescriptvue.jspinia

Type annotation to state with setup store


I set up a pinia store in setup store syntax (see https://pinia.vuejs.org/core-concepts/#Setup-Stores). I use for my whole project typescript but there is no description in pinia for working with typescript and setup stores (instead of option stores).

But there is an issue with type annotation for state variables

export const useComponentsStore = defineStore('components', () => {
  ..
  const selectedComponents: ServerConfigComponent[] = ref([]);
  ..

The error message is

Type 'Ref<never[]>' is missing the following properties from type 'ServerConfigComponent[]': length, pop, push, concat, and 35 more.ts(2740)

It works for computed (getters) variables.


Solution

  • refs are typed using generic parameters :

    const selectedComponents = ref<ServerConfigComponent[]>([]);