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>

但是我收到一个错误，说“ 类型'CombinedVueInstance void;}，未知，只读>>'中不存在属性'$ languages'”

奇怪的是，如果我只是想在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和打字稿：无法识别全局方法

1 个答案: