State Snapshot of Setup Stores with Typescript

[TransferFunction]

Hi,

I have this situation where I use the Setup Stores syntax, but also try to add compatibility with Typescript. The problem occurs defining an interface

interface CountState { count: number, name: string }

and returning that interface type using the Setup Stores syntax

export const useCounterStore = defineStore('counter', (): CountState => {
  const count = ref(0)
  const name = ref('Eduardo')

  return { count, name }
})

In this example (notice the returning of CountState), TS will throw an error, because count and name are not number and string types but, Ref<number> and Ref<string> types. I tried to work around this by returning the value of the Proxies

  return {
      count.value,
      name.value
}

But that messes up the reactivity in components using the store values.

So to work around this I just wrote another interface for the returned state type and added a function to extract the values out of the Proxies to save a memento of the state.

Has anyone run into this problem?
Is there an elegant solution without changing syntax?

[posva]

You don't need to add the return type but if you really want to, you will have to type the return type with Ref and Computed:

import { Ref } from 'vue'

interface CountState { count: Ref<number>, name: Ref<string> }