TypeScript가 Vue 플러그인에 대한 모듈 확장을 인식하지 못하는 이유

TypeScript가 Vue 플러그인에 대한 모듈 확장을 인식하지 못하는 이유

나는 Vue와 TypeScript를 배우기 위해 만들고 있는 Vue 프로젝트가 있다.이 프로젝트에는 Vue 플러그인으로 구성 요소에 사용할 수 있도록 선택한 정적 데이터 덩어리가 있으며 Vue 프로토타입에 속성을 추가하십시오.

import _Vue from 'vue';

export default function myPlugin(Vue: typeof _Vue): void {
  Vue.prototype.$myPlugin = { one: 1, two: 2 };
}

나는 피터 쿤이 올린 글에서 부동산 유형을 정의하면서 그 충고를 따랐다.test-plugin.d.ts파일

import Vue from 'vue';

declare module 'vue/types/vue' {
    interface Vue {
        $myPlugin: object;
    }
}

드디어 내가import그리고use()플러그 인

import Vue from 'vue';
import App from './App.vue';
import MyPlugin from './test-plugin';

Vue.use(MyPlugin);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

그러나 단일 파일 Vue 구성 요소의 속성을 참조하면 vscode와 TypeScript 트랜스필러 모두 속성이 존재하지 않는다는 오류를 발생시킨다.

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data: {
    one: 0,
  },
  created(): void {
    this.one = this.$myPlugin.one;
  },
});
</script>

오류:

ERROR in /Users/kccricket/Projects/what-the-heck/vue-plugin-test/src/components/HelloWorld.vue
43:21 Property '$myPlugin' does not exist on type 'CombinedVueInstance<Vue, { one: number; }, {}, {}, Readonly<{ msg: string; }>>'.
    41 |   },
    42 |   created(): void {
  > 43 |     this.one = this.$myPlugin.one;
       |                     ^
    44 |   },
    45 | });
    46 | </script>

에러에도 불구하고this.one === 1암호가 만들어지고 실행되면 예상한 대로내가 뭘 잘못하고 있는지 알아낼 사람 있어?

GitHub에 샘플 코드를 게시했다. https://github.com/kccricket/what-the-heck/tree/master/vue-plugin-test

환경

"dependencies": {
  "vue": "^2.5.16"
},
"devDependencies": {
  "@vue/cli-plugin-typescript": "^3.0.0-rc.5",
  "@vue/cli-service": "^3.0.0-rc.5",
  "vue-template-compiler": "^2.5.16"
}

플러그인과 함께 사용하기 위해 Vue의 타이핑을 증분하는 경우(와 같이)test-plugin.d.ts- 먼저 Vue를 가져오십시오.

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
   $myPlugin: object 
  } 
}

여기 문서로 설명되어 있다.

갱신하다

게시물에 대한 언급은 없지만 아직 게시하지 않았다면 단일 파일 구성요소를 위한 심도 필요:

// sfc.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

이를 TypeScript-Vue-Starter 저장소에서 확인할 수 있다.

갱신하다

위와 같은 것을 무시한 채, 나는 견본 리포를 알아차리지 못했다.유형 오류를 해결했으므로 변경 사항을 확인하십시오.

대답하다

@kccricket에서 지적한 바와 같이, 플러그인의 구현과 선언 파일의 명칭이 동일하여 모듈이 잘못 해결되는 원인이 되었다.

// original file names

test-plugin.ts
test-plugin.d.ts

나에게 효과가 있었던 것은 .ts 플러그인 파일 안에 다음과 같은 선언을 하는 것이었다.

declare module 'vue/types/vue' {
  interface Vue {
    $myPlugin: object;
  }
}

나는 그 글에서 추천한 것과 같은 것을 .d.ts 파일에 넣어 보려고 했지만, 무감각은 여전히 컴포넌트 코드에서 제대로 볼 수 없었다.

참조URL: https://stackoverflow.com/questions/51469620/why-doesnt-typescript-recognize-module-augmentation-for-a-vue-plugin