vuejs2 - Hvorfor gjenkjenner ikke TypeScript modulutvidelse for en Vue-plugin?

Jeg har et Vue-prosjekt som jeg bygger for å lære både Vue og TypeScript. Prosjektet har en bit med statiske data som jeg har valgt å gjøre tilgjengelig for komponenter som en Vue-plugin, ved å legge til en egenskap på Vue-prototypen.

import _Vue from 'vue';

export default function myPlugin(Vue: typeof _Vue): void {
  Vue.prototype.$myPlugin = { one: 1, two: 2 };
}

Jeg fulgte rådet i et innlegg av Peter Kuhn og definerte egenskapstypen i en test-plugin.d.ts-fil.

import Vue from 'vue';

declare module 'vue/types/vue' {
    interface Vue {
        $myPlugin: object;
    }
}

Endelig importerer jeg og bruker() pluginen.

import Vue from 'vue';
import App from './App.vue';
import MyPlugin from './test-plugin';

Vue.use(MyPlugin);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Men når jeg refererer til egenskapen i en enkeltfil Vue-komponent, gir både vscode og TypeScript-transpileren en feil om at egenskapen ikke eksisterer.

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data: {
    one: 0,
  },
  created(): void {
    this.one = this.$myPlugin.one;
  },
});
</script>

Feilen:

ERROR in /Users/kccricket/Projects/what-the-heck/vue-plugin-test/src/components/HelloWorld.vue
43:21 Property '$myPlugin' does not exist on type 'CombinedVueInstance<Vue, { one: number; }, {}, {}, Readonly<{ msg: string; }>>'.
    41 |   },
    42 |   created(): void {
  > 43 |     this.one = this.$myPlugin.one;
       |                     ^
    44 |   },
    45 | });
    46 | </script>

Til tross for feilen, this.one === 1 som jeg forventer når koden er bygget og kjørt. Kan noen påpeke hva jeg gjør galt her?

Jeg har lagt ut eksempel-koden på GitHub: https://github.com/kccricket/what-the-heck/tree/master/vue-plugin-test

Miljø

"dependencies": {
  "vue": "^2.5.16"
},
"devDependencies": {
  "@vue/cli-plugin-typescript": "^3.0.0-rc.5",
  "@vue/cli-service": "^3.0.0-rc.5",
  "vue-template-compiler": "^2.5.16"
}

Svar #1

Når du utvider Vue-typing for bruk med en plugin - som i test-plugin.d.ts - må du importere Vue først:

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
   $myPlugin: object 
  } 
}

Det er forklart her i dokumentasjonen.

oppdatering

Jeg ser ikke at det er nevnt i innlegget ditt, men hvis du ikke har gjort det, trenger du også en shim for enkeltfilkomponenter:

// sfc.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

Du kan se dette i TypeScript-Vue-Starter-repositoriet.

oppdatering

Se bort fra det ovenstående, jeg la ikke merke til prøve-repoet. Jeg klarte å løse typefeilen, se endringene her.

svar

Som påpekt av @kccricket, hadde pluginens implementerings- og deklarasjonsfiler samme navn, noe som dermed forårsaket at modulen ble løst feil.

// original file names

test-plugin.ts
test-plugin.d.ts

Svar #2

Det som fungerte for meg, var å ha følgende deklarasjon inne i .ts-pluginfilen:

declare module 'vue/types/vue' {
  interface Vue {
    $myPlugin: object;
  }
}

Jeg prøvde å ha det samme i .d.ts-filen som anbefalt i den artikkelen, men Intellisense kunne fortsatt ikke se det riktig i komponentkoden.

Relaterte artikler