Return Type of defineStore with TypeScript

[wolkenheim]

I´m trying to figure out how to pass a store as a parameter inside my application. And I´m failing so far.

I´m using Vue3 with Pinia and TypeScript. My IDE is JetBrains PhpStorm btw.

My User store looks like this.

export const useUserStore = defineStore("user", {
    state: (): UserStore => ({
        user: null,
        accessToken: "",
        refreshToken: "",
        groups: []
    }),

No problems so far. It can be used in my Vue components in the setup method. Even in functions like this:

const userStore = useUserStore();

const setToken = (uStore: typeof userStore) => {
  uStore.setAccessToken("xxx")
}

This works. I get type hinting and everything works fine.

Inspecting the type gives me the following:

const userStore: Store<"user", UserStore, {isLoggedIn(): boolean}, {setUser(user: AuthUser): void, deleteUser(): void, setAccessToken(token: string): void, setRefreshToken(token: string): void, addGroup(group: string): void}>

As soon as I move that function to its own file the troubles start. The type of my User Store is using generics from pinia.d.ts and the Store type. If I understand this correctly there is no written type definition because of the generics.

What I want to achieve is dependency injection for a class defined in its own file.

// client.ts
export class Client {
    constructor(protected userStore: any)
}

This class would be instantiated inside a Vue component and the store injected from there.

I can´t figure out the type here. As a solution I wrote an interface and use it as the type in the constructor

export interface UserStoreMethods {
    isLoggedIn(): boolean
    setUser(user: KeycloakProfileAttributes): void
    setAccessToken(token: string): void
    setRefreshToken(token: string): void
    addGroup(group: string) : void
}

The TypeScript compiler does not like my idea:

TS2345: Argument of type 'Store<"user", UserStore, { isLoggedIn(): boolean; }, { setUser(user: AuthUser): void; deleteUser(): void; setAccessToken(token: string): void; setRefreshToken(token: string): void; addGroup(group: string): void; }>' is not assignable to parameter of type 'UserStoreMethods'.   
Types of property 'isLoggedIn' are incompatible.     
Type 'boolean' is not assignable to type '() => boolean'.

Same goes for trying to cast the userStore to the UserStoreMethods interface. "No overlapping types" it goes.

My workaround is:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

With this I´m able to get auto completion for the types. I could live with that, but it´s a hacky work around.

There is a second work around. Not injecting the store as a parameter but simply calling userStore = useUserStore() in the constructor of the Client class. However, this is not how Dependency Injection is supposed to work.

It feels like I´m working against the framework here. It seems to me the idea from Pinia is to use const userStore = useUserStore() in every .ts file.

Can anyone point me in the right direction? Or is it really: working against the framework and not a good idea to pass stores around as parameters?

Thank you!

[posva]

You can use the type ReturnType
#1054 (comment)

[wolkenheim]

This is perfect, it works. I thought I knew TypeScript but have not yet seen ReturnType. Thank you.