Vue 实例不拾取 shims-vue.d.ts 文件

Question

我有一个如下所示的 Vue 文件：

import Vue from 'vue';
import VueRouter from 'vue-router';

export default Vue.extend({
  name: 'MyComponentsName',
  methods: {
    doRedirect() {
      this.$router.push({ name: 'another-route' });
    },
  },
});

然后在我的 shims-vue.d.ts 文件中：

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue/types/vue' {
  import VueRouter from 'vue-router';

  interface VueConstructor {
    $router: VueRouter;
  }

  interface Vue {
    $router: VueRouter;
  }
}

但是，我收到以下警告：Property '$router' does not exist on type 'CombinedVueInstance<Vue, ...>

据我了解，我的填充程序应该告诉 Vue $router 是什么，但这似乎并没有发生。我想出的唯一解决方法是使用 ((this as any).$router as VueRouter).push()，但这看起来很丑陋...

我怎样才能摆脱这个警告？

Answer 1

如果你正在使用 vue-router，你不应该扩充自己。

虽然

import Vue from 'vue'

declare module '*.vue' {

  export default Vue
}

declare module 'vue/types/vue' {
  interface Vue {
    $property1: number;
  }
}

应该是这样做的正确方法

Vue 实例不拾取 shims-vue.d.ts 文件

Vue instance does not pick up shims-vue.d.ts file

typescript

vue.js

vuejs2

typescript-definitions