Plans for complete TypeScript support with TS 4.1.0

[ClickerMonkey]

What problem does this feature solve?

With the introduction of inference from template strings in TS 4.1.0 it will finally be possible to make Vuex completely type safe (validating all types, paths for commit/dispatch/modules/getters, etc).

Are there existing plans to add complete type support with the release of Vuex 4?

For reference, I've created the following project:

https://github.com/ClickerMonkey/vuex-typescript-interface

The only adjustment to the existing type system is that it would require an interface for each module and the root state - so that the modules and root state are aware of each others types. It could be optional like it currently is.

Here's how the new TS feature would solve the remaining challenge with complete type support with Vuex:

type GetEmbeddedType<O, Path extends string> = 
    Path extends `${infer A}/${infer B}` 
    ? A extends keyof O
        ? B extends keyof O[A]
            ? O[A][B]
            : never
        : never
    : never;


interface State {
    prop: {
        innerProp: number;
    }
};

type InnerPropType = GetEmbeddedType<State, 'prop/innerProp'>; // number!!

What does the proposed API look like?

Similar to what exists now, just full type support to validate types, the existence of all mutations and dispatches, and communications between the root store and it' modules.

[kiaking]

Yes! We're aware of TS 4.1 and this might work. To be honest I was thinking to focus TS on Vuex 5 but this kinda did change things 😅

Let's come back to this issue once TS 4.1 is released, and see how it goes. PR is welcome too! I think there's no harm trying out this feature 👍

Also, I think this can be added to both Vuex 3 & 4...?

[savannahp]

This would realllyyy help! Instead have to use type any just to get it to compile when it comes to your store.ts file

[timritzer]

I have written types to support 95% of the Vuex functionality. Because of some of the API surface I went with a wrapper approach, but the API surface is virtually identical. It supports all the mapper functions, and allows fully typed, checked access including namespaces. Would love some feedback if anyone finds it useful.

https://github.com/timritzer/typed-vuex

It requires TS 4.1 so that the template literal functionality is there, and works best with strict on.

[mohammedzamakhan]

Any updates for better Typescript support for Vuex 4?

[glen-84]

Does anyone know how to augment the vuex types to achieve what is shown here:

type VuexOptions<M, N> = {
   namespace?: N,
   mutations: M,
}
 
type Action<M, N> = N extends string ? `${N}/${keyof M & string}` : keyof M
 
type Store<M, N> = {
   dispatch(action: Action<M, N>): void
}
 
declare function Vuex<M, N>(options: VuexOptions<M, N>): Store<M, N>
 
const store = Vuex({
   namespace: "cart" as const,
   mutations: {
      add() { },
      remove() { }
   }
})
 
store.dispatch("cart/add")
store.dispatch("cart/remove")

(playground)

Edit: See also the 2nd article Realize Vuex unlimited level type inference (TS 4.1 new feature), which shows support for nested modules.

[Shinigami92]

Isn't is possible to get something like

store.cart.add.dispatch()
// or
store.cart.mutations.add.dispatch()
// or
store.cart.mutations.add()

This would be a whole new feature request, but would increase the DX by far IMO

[glen-84]

@Shinigami92 There's direct-vuex, but it seems a bit awkward. This should be part of vuex itself IMO.

[Shinigami92]

@glen-84 Need to test this out next week. Thanks for pointing to this, didn't know it.

[timritzer]

Does anyone know how to augment the vuex types to achieve what is shown here:

type VuexOptions<M, N> = {
   namespace?: N,
   mutations: M,
}
 
type Action<M, N> = N extends string ? `${N}/${keyof M & string}` : keyof M
 
type Store<M, N> = {
   dispatch(action: Action<M, N>): void
}
 
declare function Vuex<M, N>(options: VuexOptions<M, N>): Store<M, N>
 
const store = Vuex({
   namespace: "cart" as const,
   mutations: {
      add() { },
      remove() { }
   }
})
 
store.dispatch("cart/add")
store.dispatch("cart/remove")

(playground)

Edit: See also the 2nd article Realize Vuex unlimited level type inference (TS 4.1 new feature), which shows support for nested modules.

Ya, absolutely. We use it this way. I'll try to distill it down for you.
I use the above package to accomplish it.

We use modules, so I can't give you examples without modules, but the approach would be similar.

I'll make a small Gist.

[timritzer]

@glen-84 Here is a sample of how I am doing it: https://github.com/timritzer/typed-vuex-examples
Feel free to ask any questions. It is working great for us, as we are any-free and have full types and auto-complete