typescript - Nuxt ts-typer för VS code av injicerade egenskaper

Jag injicerar egenskaperna i Nuxt TS-kontexten på detta sätt:

~/plugins/services.ts

import Vue from 'vue';
import { errorService } from '~/services/error';
import { Plugin } from '@nuxt/types'
const services: Plugin = (context, inject) => {
  inject('errorService', Vue.observable(errorService))
}

export default services

Då har jag typfiler ~/plugins.d.ts

import Vue from 'vue';
import { ErrorService } from '~/services/error';

declare module 'vue/types/vue' {
  interface Vue {
    $errorService: ErrorService
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $errorService: ErrorService
  }
  interface Context {
    $errorService: ErrorService
  }
}

declare module 'vuex/types/index' {
  // this.$myInjectedFunction inside Vuex stores
  interface Store<S> {
    $errorService: ErrorService
  }
}

Så här använder jag det i komponenten

<template lang="pug">
  div test
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class ExampleComponent extends Vue {
  mounted() {
    this.$errorService.setErrorMessages('Failed to create meeting','Error message');
  }
}
</script>

Jag har också gjort shim på vue-filerna ~/shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

Allt byggs fint utan problem, VS Code kan se typen om jag använder this.$errorService i en mixin som är i .ts-filen, men om det är i en .vue-fil så visas ett fel att this.$errorService inte finns. Bör jag göra något mer för att få VS Code att se typen i vue-filerna?

Svar #1

@simonPuente

Vi slutar med att göra detta project-vue.ts

import Vue from 'vue';

export class ProjectVue extends Vue {
  $errorService: ErrorService
}

då i komponenterna

export default MyComponent extends ProjectVue {}

Det är lite irriterande att lägga till allt i ProjectVue-klassen eftersom programmerare kan glömma att lägga till det där osv, men det verkade fungera för oss.

Svar #2

Jag hade ungefär samma problem. I mitt fall försökte jag placera alla mina injicerade plugintyper i en fil som är vue-shim.d.ts, så jag lade den i rotmappen ~/vue-shims.d.ts och jag deklarerade alla mina typer där precis så här:

SAMMANFATTNINGSVIS LÖSNINGEN: är att lägga till import '@nuxt/types' baserat på ett problem från GitHub https://github.com/nuxt-community/composition-api/issues/178#issuecomment-664844915

Lägger till kunddeklarationstyp baserat på dokument: https://typescript.nuxtjs.org/cookbook/plugins/#iii-combined-inject