如何在基于 Vue 类的打字稿组件上声明全局混合和过滤器？答案

【问题标题】：How to declare global mixins and filters on Vue class based typescript component?如何在基于 Vue 类的打字稿组件上声明全局混合和过滤器？
【发布时间】：2021-06-05 06:00:13
【问题描述】：

我有一个适用于 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 vue.js vuejs2 vue-component

【解决方案1】：

好的，这已经奏效了如果我把它放在 global-helpers ts...

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

【讨论】：