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, ...>

据我了解，我的 shims 应该告诉 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;
  }
}

应该是这样做的正确方法