Stephen Li

Vuex 4 Typescript Declarations Generator

Update: Apr 28, 2022
Vuex is officially deprecated and should not be used anymore. You should use Pinia instead which already has great Typescript support out of the box. Alternatively if your state is simple, you can simply use a global reactive object.

Example/index.ts

undefined

Example/mutations.ts

undefined

Example/actions.ts

undefined

Example/getters.ts

undefined

Motivation

I've been using Vue 3 and Typescript for my personal side projects for awhile now. However, one of Vue's biggest weakness today is still its lack of comprehensive Typescript support. For example, its state management library, Vuex 4, still requires using strings as function names and any as payloads: 

undefined

Fortunately I've stumbled upon this solution. Due to how verbose it is, I've built this tool to automate the repetitive boilerplate code for my future projects. Hopefully this tool will no longer be necessary by the time Vuex 5 is released.

Vuex Modules

While it should be possible to type modules with template literal types added in TS4.1, I don't think it's worth investigating because:

  • Vuex modules will be deprecated in Vuex 5
  • You can (and should) already be composing your Vuex state with multiple stores instead of nesting them like a tree.