DEV Community

Discussion on: Vuex + TypeScript

Collapse
 
9smtm6 profile image
9SMTM6

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