typescript - VS Code 中注入属性的 Nuxt ts 类型

我正在像这样将属性注入到 Nuxt 的 TS 上下文中：

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

然后我有类型文件 ~/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
  }
}

这就是我在组件中使用它的方式

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

我还已经对 Vue 文件进行了 shim ~/shims-vue.d.ts

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

一切都在顺利构建，没有问题，如果我在 .ts 文件中的 mixin 中使用 this.$errorService，VS Code 可以识别类型，但如果是在 .vue 文件中，则会显示 this.$errorService 不存在的错误。我需要做些什么才能让 VS Code 在 vue 文件中识别类型吗？

答案＃1

@simonPuente

我们最终做了这个 project-vue.ts

import Vue from 'vue';

export class ProjectVue extends Vue {
  $errorService: ErrorService
}

然后在组件中

export default MyComponent extends ProjectVue {}

将所有内容都添加到ProjectVue类中有点烦人，因为程序员可能会忘记在那里添加等等，但这对我们似乎有效。

答案＃2

我有点遇到同样的问题，在我的例子中，我试图将所有注入的插件类型放到一个文件中，也就是 vue-shim.d.ts，所以我把它放在根目录 ~/vue-shims.d.ts，并且我就在那声明了所有的类型，就像这样：

简而言之，解决方案是：根据 GitHub 上的一个问题 https://github.com/nuxt-community/composition-api/issues/178#issuecomment-664844915，添加 import '@nuxt/types'

根据文档添加客户声明类型：https://typescript.nuxtjs.org/cookbook/plugins/#iii-combined-inject