为什么TypeScript无法识别Vue插件的模块扩充？

Question

我正在构建一个Vue项目，以学习Vue和TypeScript。我选择了该项目的大量静态数据，以作为Vue插件提供给组件，从而为Vue原型添加了一个属性。

import _Vue from 'vue';

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

我遵循Peter Kuhn在帖子中的建议，在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>

错误：

import _Vue from 'vue';

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

尽管有错误，但this.one === 1正如我期望的那样，一旦构建并执行了代码。有人可以在这里指出我在做什么错吗？

我已经将示例代码发布到了GitHub：https : //github.com/kccricket/what-the-heck/tree/master/vue-plugin-test

环境

import Vue from 'vue';

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

Answer 1

当您增加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

Answer 2

什么工作对我来说是有下面的声明中包含.ts插件文件：

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

我尝试在 .d.ts 文件中使用该文章中推荐的相同内容，但智能感知仍然无法在组件代码中正确看到它。