Property '[...]' does not exist on type 'VueConstructor<Vue>' #11759
Description
Version
2.6.12
Reproduction link
https://codepen.io/Byloth/pen/mdEzMGX
N.B.: It works, here on CodePen... But it won't work inside a real Vue project.
Steps to reproduce
- Create a new TypeScript Vue Project using Vue CLI.
- Copy & Paste this mixin inside
main.tsfile (right above Vue app initialization and mount).
Vue.mixin({
data: () => ({ aRandomMixinProperty: "John Doe" }),
mounted()
{
this.aRandomMixinProperty = "John Snow";
}
});- Try to build the project.
What is expected?
It should compile correctly.
What is actually happening?
It doesn't compile at all.
ERROR in /path/to/project/src/main.ts(15,14):
15:14 Property 'aRandomMixinProperty' does not exist on type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, Record<...>>'.
Property 'aRandomMixinProperty' does not exist on type 'VueConstructor<Vue>'.
13 | mounted()
14 | {
> 15 | this.aRandomMixinProperty = "John Snow";
| ^
16 | }
17 | });
18 |
Version: typescript 4.0.5
Time: 2856ms
As workaround, you could use:
/* main.ts */
Vue.mixin({
data: () => ({ aRandomMixinProperty: "John Doe" }),
mounted()
{
(this as Vue).aRandomMixinProperty = "John Snow";
}
});... and...
/* mixins.d.ts */
declare module "vue/types/vue"
{
interface Vue
{
aRandomMixinProperty: string;
}
}