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-路由器，你不应该增强自己。

尽管

import Vue from 'vue'

declare module '*.vue' {

  export default Vue
}

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

应该是正确的做法