Блог

Я добавляю свойства в контекст 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
~/shims-vue.d.ts

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

  

Все строится хорошо, никаких проблем, VS Code может видеть тип, если я использую this.$errorService в mixin, который находится в .ts файле, но если он есть в .vue файле, тогда отображается ошибка, которая this.$errorService не существует. Должен ли я сделать что-то еще, чтобы VS Code видел тип в файлах vue?

@simonPuente

В конечном итоге мы делаем это project-vue.ts

 import Vue from 'vue';

export class ProjectVue extends Vue {
  $errorService: ErrorService
}
  

затем в компонентах

 export default MyComponent extends ProjectVue {}
  

Немного раздражает добавлять все в ProjectVue класс, поскольку программисты могут забыть добавить это туда и т.д., Но, похоже, у нас это сработало.

У меня вроде как была такая же проблема, в моем случае я пытался поместить все мои введенные типы плагинов в один файл, который vue-shim.d.ts поэтому я поместил его в корневую папку ~/vue-shims.d.ts , и я объявил все свои типы там именно так:

КОРОЧЕ ГОВОРЯ, РЕШЕНИЕ: добавить import '@nuxt/types' на основе проблемы с GitHub https://github.com/nuxt-community/composition-api/issues/178#issuecomment-664844915

Добавление типа объявления клиента на основе документов:https://typescript.nuxtjs.org/cookbook/plugins/#iii-combined-inject