Extend or override type definition for vuex store

Question

I'm using Vuex for state management in my app and I'm also using TypeScript, ideally I like to be able to refer to a strongly typed version of the store rather than just the default where state is 'any' etc... I know how to 'extend' type definitions to add for example a new property, but I'm struggling to figure out a way (if possible) to 'force' a strongly typed store definition over the default Store. I'm just getting errors saying that subsequent definitions must have the same type, which I guess is understandable, but I'm lazy and want some intellisense! ;-)

Most of the docs I've read say its not possible to override a type already defined in a type definition file and that you can only add additional properties for example, but is there any way what I'm after is possible this way or any other? Otherwise I'm going to have to remember all the names of my methods/actions etc..

Answer 1

While you can't redefine an existing property, you can defined a typed version of the $store property as an alias for the un-typed version:

import Vue from 'vue'
import * as Vuex from 'vuex'

declare module "vue/types/vue" {
    interface Vue {
        $typedStore: Vuex.Store<{
            count: number
        }>;
    }
}

Object.defineProperty(Vue.prototype, "$storeTyped", {
    get: function(this: Vue) {
        return this.$store;
    }
})


const App = new Vue({
    computed: {
        counter: function (this: Vue) {
            return this.$storeTyped.state.count; // Works and is typed
        }
    },
    // Other stuff
});