Obtaining type of the store's instance through typeof

[DamianGlowala]

What problem is this solving

Allowing to declare a variable's type in TS enviroment (in advance) equal to the exact representation of the Pinia store, before the variable's value is assigned (of which type otherwise would be naturally inferred by the useStore() return type).

Proposed solution

Would it be possible to leverage typeof and, instead of obtaining StoreDefinition, provide a TS helper to turn it into a Store type? Is this even feasible?

class AuthenticationManager {
    private readonly $axios: NuxtAxiosInstance;
    private readonly authenticationStore: typeof useAuthenticationStore; // ERROR: got StoreDefinition instead of Store

    constructor($axios: NuxtAxiosInstance, $pinia: Pinia) {
        this.$axios = $axios;
        this.authenticationStore = useAuthenticationStore($pinia);
    }
}

Describe alternatives you've considered

I tried using typeof useAuthenticationStore, but the type is StoreDefinition and not Store which useAuthenticationStore($pinia) returns.

Is there any already-exisiting way to achieve what I highlighted in the above snippet?

[soc221b]

Is this what you need? 🤔

const useCounterStore = defineStore('counter', () => {
  const current = ref(0)
  const double = computed(() => current.value * 2)
  const increment = () => current.value++

  return {
    current,
    double,
    increment,
  }
})

type UseNullStore = ReturnType<typeof defineStore>
type NullStore = ReturnType<UseNullStore>
type CounterStore = ReturnType<typeof useCounterStore>
type CounterStoreSGA = Omit<CounterStore, keyof NullStore>

SGA: State, Getter, Action

[DamianGlowala]

Thank you for the above @iendeavor, it does work (although isn't anything I'd come up immediately myself). 😄

As I want to preserve methods like $patch(), this is a slightly modified version:

type AuthenticationStore = Omit<
    ReturnType<typeof useAuthenticationStore>,
    keyof ReturnType<typeof defineStore>
>;

[yuqianma]

This is helpful !
Why don't we have this in Pinia... It should be a helper type exported by Pinia.

[kenny-reyes]

How do you export that types for using in another components?

Thanks

[svetamazz]

Thank you, very helpful! I slightly tweaked the above solutions to have a generic type:

export type PiniaStore<T extends (...args: any) => any> = Omit<
  ReturnType<T>,
  keyof ReturnType<typeof defineStore>
>;

It can be used like so:

let authenticationStore: PiniaStore<typeof useAuthenticationStore>;

authenticationStore = useAuthenticationStore();

[Babaktrad]

There is a situation when we need to define a ref as generic type. How to achieve this?

// in stores/sample.ts
export const useSampleStore = defineStore("sample", <T>() => {
    const data = ref<T>({})
})

// in sample.vue
<script setup lang="ts">
    type SampleSchema = {
        a: string;
        b: string;
    }

    const sampleStore = useSampleStore<SampleSchema>() // error: Expected 0 type arguments, but got 1`
</script>

But it gets a Typescript error: Expected 0 type arguments, but got 1