Running into Typescript complaints when trying to create a plugin.

[joezimjs]

I'm trying to create a plugin that allows you to specify a new option __initialize that is used kinda like a constructor and is called (by my plugin) the first time the store is used and sets context.store.isInitialized = true to make sure I don't call it again. I tried following the docs to set up PiniaCustomProperties, but Typescript complained that I needed to redeclare it the same way as the original, which I satisfied with this:

declare module 'pinia' {
    export interface PiniaCustomProperties<
        Id extends string = string,
        S extends StateTree = StateTree,
        G extends GettersTree<S> = GettersTree<S>,
        A = ActionsTree
    > {
        isInitialized?: boolean;
        $options: {
            id: Id;
            state?: () => S;
            getters?: G;
            actions?: A;
            __initialize?: () => void | Promise<void>;
        };
    }
}

This made it so that there were no complaints about accessing context.store.isInitialized or context.options.__initialize inside the plugin, but there are still complaints about trying to actually define an __initialize inside a store so I needed to augment DefineStoreOptions too, which I did like this:

export interface DefineStoreOptions<Id extends string, S extends StateTree, G extends GettersTree<S>, A> {
    id: Id;
    state?: () => S;
    getters?: G & ThisType<UnwrapRef<StateTree extends S ? {} : S> & StoreWithGetters<G> & PiniaCustomProperties>;
    actions?: A &
        ThisType<
            A &
                UnwrapRef<StateTree extends S ? {} : S> &
                StoreWithState<Id, S, G, A> &
                StoreWithGetters<GettersTree<S> extends G ? {} : G> &
                PiniaCustomProperties
        >;
    __initialize?: () => void | Promise<void>;
}

Now, in VS Code, I'm not seeing any errors, squiggly underlines, etc., but when I try to run it (using Vue CLI's npm run serve), I get this error:

ERROR in src/plugins/initStore.ts:30:28
TS2344: Type 'G' does not satisfy the constraint 'Record<string, (() => any) | ((state: {}) => any)>'.
  Type 'Record<string, (() => any) | ((state: UnwrapRef<(Record<string | number | symbol, any> extends S ? {} : S) & PiniaCustomStateProperties<S>>) => any)>' is not assignable to type 'Record<string, (() => any) | ((state: {}) => any)>'.
    Index signatures are incompatible.
      Type '(() => any) | ((state: UnwrapRef<(Record<string | number | symbol, any> extends S ? {} : S) & PiniaCustomStateProperties<S>>) => any)' is not assignable to type '(() => any) | ((state: {}) => any)'.
        Type '(state: UnwrapRef<(Record<string | number | symbol, any> extends S ? {} : S) & PiniaCustomStateProperties<S>>) => any' is not assignable to type '(() => any) | ((state: {}) => any)'.
          Type '(state: UnwrapRef<(Record<string | number | symbol, any> extends S ? {} : S) & PiniaCustomStateProperties<S>>) => any' is not assignable to type '() => any'. 
    28 |                A &
    29 |                    UnwrapRef<StateTree extends S ? {} : S> &
  > 30 |                    StoreWithState<Id, S, G, A> &
       |                                          ^
    31 |                    StoreWithGetters<GettersTree<S> extends G ? {} : G> &
    32 |                     PiniaCustomProperties
    33 |            >;

I just started using TypeScript a few days ago and what I'm WRITING is kinda over my head, but this error is really over my head. Any idea how to fix this? And since you're here, do you have a better idea than doing a plugin like this for handling "constructors"? I've been just creating an "initialize" action and making sure to call it right away after useing the store, but I think it'd be nice for this to be automatic.

[posva]

The updated docs are not published yet (it will with Vue 3.2.0), but you need to provide all generics with the exact same name as in the source code. You don't need to provide the default values. There is a full example at https://github.com/posva/pinia/blob/v2/test-dts/customizations.test-d.ts. I plan on creating a few small plugins as examples as well.

BTW, you shouldn't redeclare existing options like actions, state, etc

In your case something like this should do

import 'pinia'

declare module 'pinia' {
    export interface PiniaCustomProperties<Id, S, G, A> {
      // NOTE: I would personally not bother with declaring this option and ignore it in ts since it's an internal property that is not used outside of `__initialize`
      isInitialized?: boolean;
    }

    export interface DefineStoreOptions<Id, S, G A> {
      __initialize?: () => Promise<void> | void
    }
}

About the constructor question:

• Using the beta version you can use a function store (clone the project, yarn, and yarn docs to read the updated docs)
• Create a plugin that calls the __initialize method for you: pinia.use(({ store }) => { store.__initialize.?() })

[posva]

Here is an example plugin: https://github.com/posva/pinia-plugin-debounce

[joezimjs]

Thanks so much. That code example works like a charm. So much cleaner and easier to grok the intentions than what I had too!

I see what you're saying about not bothering adding the isInitialized to the interface. I don't really like the idea of just ts-ignoreing it either... so I'll probably just make a separate variable scoped to this plugin's file that tracks the stores that have been initialized instead of sticking that on the stores themselves unnecessarily.

I'm looking forward to the latest from the beta because the function stores are what I was hoping to be using from the start. Since this is just a personal project, I might go ahead and install that, but at the very least I'm getting some good plugin experience right now.

[posva]

if you don't have many dependencies that use Vue, upgrading it to its beta should be quite safe 🙂

Note option stores have a slightly better devtools experience