TypeScript not recognizing type of destructured properties with storeToRefs and Vue 2

[alexanderop]

Question:

I have been using Pinia with Vue 2 and have come across a TypeScript issue that I can't seem to resolve. I have a simple store like this:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter-store', {
  state: () => ({
    currentValue: 0,
  }),
})

In my component, I am trying to destructure the properties with storeToRefs:

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from "./stores/counter";

const counterStore = useCounterStore();
// here ts is telling me currentValue is of type any
const { currentValue: count } = storeToRefs(counterStore);

</script>

<template>
  <button type="button" @click="count++">count is: {{ count }}</button>
</template>

The problem is that TypeScript doesn't recognize that the destructured count is of type Ref. In Vue 3, it works as expected, but in Vue 2, TypeScript infers the type of count as any, which results in a loss of type safety.

I'm not sure why this is happening. Could anyone provide some insights or solutions to this issue? Any help would be greatly appreciated.

[geraman21]

Have the same issue ! storeToRefs doesnt type its return value correctly.