typescript - Nuxt ts-typer for VS Code av injiserte egenskaper

Jeg injiserer egenskapene i Nuxt TS-konteksten slik:

~/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

Da har jeg types-fil ~/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
  }
}

Slik bruker jeg 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>

Jeg har også laget shim for Vue-filene ~/shims-vue.d.ts

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

Alt bygges fint uten problemer, VS Code kan se typen hvis jeg bruker this.$errorService i en mixin som er i .ts-filen, men hvis det er i .vue-filen, vises det en feil om at this.$errorService ikke eksisterer. Må jeg gjøre noe mer for å få VS Code til å se typen i vue-filene?

Svar #1

@simonPuente

Vi ender opp med å gjøre dette project-vue.ts

import Vue from 'vue';

export class ProjectVue extends Vue {
  $errorService: ErrorService
}

deretter i komponentene

export default MyComponent extends ProjectVue {}

Det er litt irriterende å legge alt til ProjectVue-klassen siden programmerere kan glemme å legge det til der osv., men det så ut til å fungere for oss.

Svar #2

Jeg hadde slags det samme problemet. I mitt tilfelle prøvde jeg å plassere alle mine injiserte plugintyper i én fil som er vue-shim.d.ts, så jeg la den i rotmappen ~/vue-shims.d.ts og jeg erklærte alle typene mine der akkurat slik:

KORT SAGT LØSNINGEN: er å legge til import '@nuxt/types' basert på et problem fra GitHub https://github.com/nuxt-community/composition-api/issues/178#issuecomment-664844915

Legger til kundens deklarasjonstype basert på dokumenter: https://typescript.nuxtjs.org/cookbook/plugins/#iii-combined-inject