环境

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

我遵循了post by 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>

错误：

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

Answer 1

当您增加Vue类型以供插件使用时（如test-plugin.d.ts），您需要先导入Vue：

import Vue from 'vue'

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

它解释了here in the docs。

更新

我没有在您的帖子中提及它，但是如果您还没有这样做，那么您还需要为单个文件组件添加垫片：

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

您可以在TypeScript-Vue-Starter存储库中看到它。

更新

忽略上述内容，我没有注意到示例存储库。我设法解决了类型错误，请查看更改here。

answer

如 @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文件中添加相同的内容，但是intellisense仍然无法在组件代码中正确看到它。

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

环境

2 个答案: