typescript - Vue-instans plockar inte upp shims-vue.d.ts-fil

Jag har en Vue-fil som ser ut så här:

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

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

Och sedan i min shims-vue.d.ts-fil:

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

Men jag får följande varning: Property '$router' finns inte på typen 'CombinedVueInstance<Vue, ...>'

Såvitt jag förstår borde mina shims tala om för Vue vad $router är, men det verkar inte hända. Den enda lösningen jag har kommit på är att använda ((this as any).$router as VueRouter).push(), men det verkar ganska fult...

Hur kan jag bli av med denna varning?

Svar #1

Om du använder vue-router bör du inte förstärka dig själv.

Även om

import Vue from 'vue'

declare module '*.vue' {

  export default Vue
}

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

Borde vara det rätta sättet att göra det på

Relaterade artiklar