typescript - 挿入されたプロパティの VS コード用の 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

それから、types ファイルがあります ~/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 ファイルにも shimed を付けました ~/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 ファイル内の型を認識できるようにするには、さらに何かを行う必要がありますか?

まだ探している場合は、この回避策を確認してください

2021 年 6 月 25 日 14:54

@Dawid 解決策は見つかりましたか?

2022 年 4 月 12 日 2:20

@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 という 1 つのファイルに配置しようとしたため、ルートフォルダー ~/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