typescript - 扩展或覆盖 vuex 存储的类型定义

Question

我在我的应用程序中使用 Vuex 进行状态管理，并且还使用 TypeScript，理想情况下我希望能够引用商店的强类型版本，而不仅仅是状态为“任意”的默认版本等...我知道如何“扩展”类型定义以添加例如新属性，但我正在努力找出一种方法(如果可能)在默认存储上“强制”强类型存储定义。我只是收到错误消息，说后续定义必须具有相同的类型，我想这是可以理解的，但我很懒，想要一些智能感知! ;-)

我读过的大多数文档都说不可能覆盖类型定义文件中已经定义的类型，并且您只能添加其他属性，例如，但是有什么办法可以实现我想要的功能吗？方式还是其他方式？否则我将不得不记住我的方法/操作等的所有名称。

Answer 1

虽然您无法重新定义现有属性，但您可以将 $store 属性的类型化版本定义为非类型化版本的别名:

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
});