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;
}
}

应该是这样做的正确方法