Vue 和打字稿：无法识别全局方法

Question

我有一个 Vue mixin 像这样：

const mixin = Vue.extend({
    methods: {
        $languages: function(): object {
            return {
                en: 'english'
            }
        }
    }
}


Vue.mixin(mixin)
new Vue({
    router,
    render: h => h(Frame)
}).$mount('#app')

...我正在尝试在组件中使用它：

<template lang="pug">
    .languages
        a( v-for="language, code in $languages()" :key="code" @click="$root.$i18n.locale = code") {{ language }}&nbsp;
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    methods: {
        languages: function () {
            console.log(this.$languages)
        }
    }
})
</script>

但我得到一个错误，说“属性 '$languages' 在类型 'CombinedVueInstance void; }, unknown, Readonly>>' 上不存在”

奇怪的是，如果我只是想在 template 中使用它，它就可以工作。出现语言名称。只是打字稿代码无法识别函数

Answer 1

您需要扩充 vue 模块来为 $languages 提供类型，观察：

// vue-shim.d.ts

declare module 'vue/types/vue' {
  interface Vue {
    $languages: LanguageService
  }
}

还有一个伪LanguageService

// language-service.d.ts

export interface LanguageService {
  $languages: () => Record<string, string>
}

您可以阅读更多关于 augmenting Vue here

Vue 和打字稿：无法识别全局方法

Vue & typescript: Global methods are not recognised

mixins

typescript

vue.js