DEV Community

Vuex + TypeScript

Andrew on May 04, 2020

Preface 🚨 The approach, described in this article, is not encouraged to be used in production, till Vuex 4.x and Vue.js 3.x are complet...

Read full post

Andrew • Sep 23 '20

Wow! I totally didn't expect that this article will be popular. Thank you for your comments.

According to the comments I've read, here is what I'm planning to include:

how to type namespaced modules;

What do you think of idea of creating a dedicated package with helper types (MutationTree, GetterTree, ActionTree, Store)?

I also managed to type getters, rootState, rootGetters in actions and getters.

Stay tuned.

Sören Martius • Oct 27 '20

Hey Andrew, thanks for this great example. I am currently stuck in the process of typing getters, rootState, and rootGetters in actions and getters. Any chance that you can share an example? I guess the AugmentedActionContext and Store type definitions is what I am looking for.

Thank You

Sören Martius • Oct 27 '20

As a reference, I've uploaded a gist here: gist.github.com/soerenmartius/5f69...

The code works but typescript is unable to resolve the getters properly. Any help will be highly appreciated

Gayrat Vlasov • Jan 28 '21

Thank you very march for great article!

You promice to add some new code as you described above.
May be you have any news about it ?

Sergej • Oct 23 '20

Hey Andrew, any thoughts on the namespaced modules yet? Great guide otherwise!

Andrew • Oct 23 '20 • Edited

Hey Sergej, Thanks. You have to manually create MODULE_NAME/MUTATION_TYPE mappings by now. But if you are using TS 4.1 you can use Template Literal Types.

Here is the snippet from the helper library I am developing right now:

type Namespaced<T, N extends string> = {
  [P in keyof T & string as `${N}/${P}`]: T[P]
}

type NamespacedMutations = Namespaced<ArticleModuleMutations, "atricle">

Sergej • Nov 2 '20

I see, nice trick, thanks, Andrew!

Ricardo Vargas / Software Engineer • Mar 28 '22

Hi @3vilarthas
Did you share the update avoid the Types for rootState? I would like to see this resource. Thanks in advance!

Harsh Gupta • Apr 9 '21 • Edited

Hey Andrew, thanks for this great example.
can you please help with namespaced modules in vuex4 with typescript

I'm using your suggested way but I'm still getting the error

type Namespaced = {
[P in keyof T & string as ${N}/${P}]: T[P]
}
type NamespacedMutations = Namespaced

Yunjie Jia • Apr 21 '21

Hi, Harsh. I tried your method, but I still cannot use

store.dispatch('moduleName/actionName'), is there any fixes..

Harsh Gupta • Apr 23 '21 • Edited

Yes I solved, This is the solution you can refer

If you want a complete boilerplate with vue3 and other more configs you can clone or fork my repository.

github.com/techarshgupta/vue3-boil...

Yunjie Jia • Apr 23 '21

Thank you!

I tried this method but seems like it will disable type check when I use

store.dispatch('moduleName/actionName') because I can pass any string and the compiler can compile successfully

type Namespaced = {

};
type NamespacedActions = Namespaced;

Harsh Gupta • Apr 24 '21

no, it will give an error when you compile you can check my repo that I mentioned.

Francesco Belvedere • Sep 30 '20

I am still disappointed with how difficult Vuex+Typescript is to set up. I will keep using module-decorators (github.com/championswimmer/vuex-mo...) which let you have complete type safety and no redundancy in your code:

@Module
export default class Counter extends VuexModule {
  count = 0

  @Mutation
  INCREMENT(delta: number) {
    this.count += delta
  }

  @Action
  incrementOfFive() {
    this.INCREMENT(5);
  }
}

And then just use it in a component with:

import store from '@/store'
...
store.incrementOfFive();
// or
store.INCREMENT(7);

9SMTM6 • Jul 28 '20

Thanks you so much for this amazing start-point!

I wanted to evaluate the viability of Vuex + Typescript when compared to my known Redux + Typescript, as I'm not too happy with Redux. But as I have never used Vue nor Vuex in production before, bringing everything together is pretty challenging.

I'm quite decent in Typescript along though, and I noticed a few things regarding its usage where I would do things slightly different, so I thought I would write them here so you can either explain why you deem them necessary or maybe learn a tiny bit from a thankful reader:

I noticed a number of duplic typing. I.e. in src/store/mutations.ts you define the SET_COUNTER parameters typeonce in the static type (as you have to if you define the type statically), and once in the actual implementation. You could get rid of the type in the implementation, it would still be types, just as the state field is.
while we're there, why did you add the MutationTree<State> annotation? If you happend to define a mutation with the wrong type you would at the latest get warned in the createStore function, I would think at least. Additionally if you get rid of that annotation you could also ease typing by implicitly inferring the type with typeof.
Honestly, I never use the Enum type in Typescript again since I found the Union of string literals ("OPTION_1" | "OPTION_2"). Overall the purpose of these Enums in Vuex (and i.e. Redux too) is a moot point IF you have typed everything correctly all the way through. I personally do not declare enums for the different Actions/Mutations, just identifying by the function name is more than sufficient.
I would prefer to declare the type of Store in the .d.ts file

Mathieu Arnold • Dec 9 '20 • Edited

So, I was applying all the wisdom in here, to my quite large vuex stack, and I stumbled upon the second argument of Getters (I leave the third and fourth to the reader)

Basically, the second argument to Getters references the Getters for the current namespace, but not as functions, as values directly.

For example, I have this:

export type Getters = {
  user(state: State): PayloadUser | {};
  roles(state: State, getters: any): string[];
  isAdmin(state: State, getters: any): boolean;
};

export const getters: GetterTree<State, State> & Getters = {
  user({ token }) {
    if ('user' in token) {
      return token.user;
    } else {
      return {};
    }
  },
  roles(_, getters) {
    if ('roles' in getters.user) {
      return getters.user.roles;
    } else {
      return [];
    }
  },
  isAdmin(_, getters) {
    return getters.roles.includes('admin');
  },

The problem is that the getters argument as an "any" type everywhere, I tried to put the Getters type, but that was not right. After a bit of fiddeling around (I am still a bit new and rough in typescript) I ended up having this :

export type SubGetters<T extends { [K in keyof T]: (...any: any[]) => any }> = {
  [K in keyof T]: ReturnType<T[K]>;
};

export type Getters = {
  user(state: State, getters: SubGetters<Getters>): PayloadUser | {};
  roles(state: State, getters: SubGetters<Getters>): string[];
  isAdmin(state: State, getters: SubGetters<Getters>): boolean;
};

The naming is probably awful, and now that I think about it, one should just have to generate a Getters that is, say, user: PayloadUser; roles: string[]; and a different kind of fiddeling be done so that the type with the function definitions can be generated automatically.

Also, if all this goes into a module somewhere, this should probably get there too.

Mathieu Arnold • Dec 9 '20

So, I thought about what I wrote in the end and changed my code, it now reads:

export type FunGetters<T extends { [K in keyof T]: any }> = {
  [K in keyof T]: (state: State, getters: Getters) => T[K];
};

export type Getters = {
  loggedIn: boolean;
  expirationTime: number;
  user: PayloadUser | {};
  roles: string[];
  isAdmin: boolean;
};

export const getters: GetterTree<State, State> & FunGetters<Getters> = {
// [...]

Sebastian Schwarzer • Jul 30 '20 • Edited

Not sure about it, but I think you have a typo:

Without a doubt, these types are not suitable in case you want to safely work with a typed store.

state.ts:
[...]

Shouldn't this be store.ts or index.ts ?

Anyways. Thank you for this short explanation on how to type the new vuex store 🦄🎉🥳

Andrew • Sep 23 '20

Thanks! Fixed.

lostimever • Oct 26 '20

Thank you! It's vary nice article! However, how to apply it in mapState, mapGetters, mapMutations, mapActions?

Chris • Jul 11 '21

Great question

Yunjie Jia • Apr 12 '21

actually, I have a question, according to this line

payload: Parameters[1]

it forces me to commit a mutation with payload, but what if I just want to commit a mutation without a payload?

like the RESET_COUNTER action in your article

牡龙 • Jun 7 '21

I have same problem. Did you have the solution?

izerozlu • Nov 27 '21

You can mark the payload parameter as optional.

Gurkirat Singh • Nov 26 '20 • Edited

I see you are using type intersection for example GetterTree<State, State> & Getters. I have a general dbt, why did you choose this way but not interfaces.

In interfaced you in extend the GetterTree<State, State> and then use it in the Getters part.

interface Getter extends GetterTree<State, State> {
 // data
}

Javis V. Pérez • Aug 11 '20

Thank you for this, is a great post and got me started, thanks!

For anybody who is implementing this with Modules, I'm not a Typescript expert at all, but i got it working, I'm not 100% sure I did it in the best way but it is working as expected for me. You can find an example of my implementation here:
gist.github.com/javisperez/b13d020...

Open to suggestions or questions, I hope this helps somebody.

Andrew • Sep 23 '20

I'm going to include a section about namespaced modules soon.

Daniel Blackwell • Nov 7 '20

Great article!
Just a note that you have a spelling mistake GET_COUTNER rather than GET_COUNTER

Janne Kurkinen • Sep 27 '20

Thanks for this article Andrew! Could you please review the quirks that remains to be solved with my example repo (based on examples by you and others), in this SO question I've made yesterday: stackoverflow.com/questions/640805...

Emanuel • Aug 8 '20

thanks you, it was really helpful!
how would you apply this while using namespaced modules?

Andrew • Sep 23 '20

I'm going to include a section about namespaced modules soon.

Laurent Chardin • Jun 21 '20

Nice article, been playing with TS + Vue3 + Vuex4 recently.

Just a question : how would define the type for Getters to should support arguments ?

Thanks

Andrew • Sep 23 '20

Thanks, I'll include it too.

Yocss • Jan 15 '21

Hey Andrew, great article, can i translate into chinese to release to china forum?
I will mark your nickname and origin link in the article.

Mohan R • Aug 1 '20

Great post. I’m curious that everything you did is just TypeScript things except defining global $store type, so isn’t possible to do the same in Vue 2 + Vuex 3 and have a fully typed store?

Andrew • Sep 23 '20

What we did in our project is that we just removed the global vuex types/vue.d.ts files, and used the approach with Vue 2.x. Take a look at npm-patch-package. Then you can just comment out these lines and apply the patch. That's it, you can type the store in 2.x.

I also like the idea that API and code stay the same, we just enhance typings.

Robert • Aug 8 '21

Better than most of typescript vuex classes and accessors out there tbh

Danielg212 • May 16 '20

great article!
I'm highly recommend vuex binding helpers for more clean code with vuex + TS :
github.com/ktsn/vuex-class

Armen Rostamian • Mar 29 '21

Update from March 2021: I'd be careful about using this lib, new friends! It's pretty old, and after trying to use it lightly, I'd say it may or may not break projects using the latest Vue (composition) + TypeScript + Vuex packages!

khalil_sayhi • May 24 '23

Hey guys, amazing post, i have only one question, how can i access a specific module state in another, Thank you in advance.