如何在基于 Vue class 的 typescript 组件上声明全局混合和过滤器？

Question

我有一个 Vue 2 的插件文件，我像这样使用它：

global-helpers.ts

import clone from 'lodash/clone'

class GlobalHelpers {
    install(Vue) {
        Vue.filter('clone', clone)
        Vue.mixin({
            methods: {
                clone,
            }
        })
    }
}

export default new GlobalHelpers()

globals.ts

import Vue from "vue"
import GlobalHelpers from './global-helpers.ts'
Vue.use(GlobalHelpers)

Products.vue ：

import {Component, Vue} from 'vue-property-decorator'
import {State, Action} from 'vuex-class'

export default class Products extends Vue {
    cloneItem(item) {
            this.item = this.clone(item)
    }
}

这会导致TS2339: Property 'clone' does not exist on type 'Products'.

我尝试了以下方法：

declare module 'vue/types/vue' {
    interface VueConstructor {
        clone: (item) => any
    }
}

declare module 'vue/types/options' {
    interface ComponentOptions<V extends Vue> {
        clone: (item) => any
    }
}

但这似乎不起作用......你能帮我解释一下我应该如何在 typescript 上声明这些属性吗？

Answer 1

好的，如果我把它放在 global-helpers ts 里面...

declare module 'vue/types/vue' {
    interface Vue {
        cloneDeep: (item) => any
    }
}