为什么 TypeScript 不能识别 Vue 插件的模块扩充? [英] Why doesn't TypeScript recognize module augmentation for a Vue plugin?
问题描述
我正在构建一个 Vue 项目来学习 Vue 和 TypeScript.该项目有一大块静态数据,我选择将这些数据作为 Vue 插件提供给组件,为 Vue 原型添加一个属性.
I have a Vue project that I'm building to learn both Vue and TypeScript. The project has a chunk of static data that I've chosen to make available to components as a Vue plugin, adding a property to the Vue prototype.
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
文件中的属性类型.
I followed the advice in a post by Peter Kuhn, defining the property type in a test-plugin.d.ts
file.
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 转译器都会抛出该属性不存在的错误.
However, when I reference the property in a single-file Vue component, both vscode and the TypeScript transpiler throw an error that the property doesn't exist.
<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
正如我所期望的,一旦代码被构建和执行.任何人都可以在这里查明我做错了什么吗?
Despite the error, this.one === 1
as I'd expect once the code is built and executed. Can anyone pinpoint what I'm doing wrong, here?
我已将示例代码发布到 GitHub:https://github.com/kccricket/what-the-heck/tree/master/vue-plugin-test
I've posted the sample code to 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第一:
When you augment Vue typings for use with a plugin - as in test-plugin.d.ts
- you need to import Vue first:
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
$myPlugin: object
}
}
更新
我没有看到你的帖子提到它,但如果你还没有这样做,你还需要一个用于单个文件组件的垫片:
I don't see mention of it your post, but if you haven't done so you also need a shim for single file components:
// sfc.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
您可以在 中看到这一点TypeScript-Vue-Starter 存储库.
更新
忽略上述内容,我没有注意到示例存储库.我设法解决了类型错误,请参阅更改 这里.
Disregard the above, I didn't notice the sample repo. I managed to resolve the type error, see the changes here.
回答
正如 @kccricket 所指出的,插件的实现和声明文件的名称相同,从而导致模块解析不正确.
As noted by @kccricket, the plugin's implementation and declaration files were named the same, thus causing the module in resolve incorrectly.
// original file names
test-plugin.ts
test-plugin.d.ts
这篇关于为什么 TypeScript 不能识别 Vue 插件的模块扩充?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!