Description
Currently, importing Vue mixins in vue-class-component under TypeScript is tricky, as defining them in
@Component() Object and in class seems to be not enough. If referring to mixin properties in the decorated class, say in the created(){} life-cycle, plain JavaScript would be fine, but in Typescript, due to its strong typings feature, its compiler complains about an error like:
Property ‘mixinsData1’ does not exist on type ‘App’.
A possible workaround for this, is implementing mixins as interfaces.
e.g.
@Component({
name: 'app',
mixins: [myMixin]
})
export default class App extends Vue implements myMixin {
mixinsData1: string;
mixinsData2: string;
//...
}
However, in this way, every single property in myMixin will have to be registered in App class. Otherwise, ts compiler will throw error again:
TS2420: Class ‘App’ incorrectly implements interface ‘myMixin’.
Property ‘mixinsData3’ is missing in type ‘App’.
As myMixin keeps growing in future developments, there will be a lot of properties defined in App class which in fact not belong to App itself. This way looks pretty hacky as well.
Additionally, if multiple mixins have to be implemented into App class, it will look messy.
(I have posted a question on vue forum: https://forum.vuejs.org/t/how-can-i-use-mixin-with-vue-class-component-and-typescript)
So, could there be a way to import vue mixins under Typescript that is less complicated?