FR: Support Vue Mixins import under TypeScript

[valorad]

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?

[HerringtonDarkholme]

You can see this https://github.com/HerringtonDarkholme/av-ts#mixin

It requires different API.

[justrhysism]

vue-typed also has implemented Mixins, basically using the same implementation as av-ts: vue-typed/vue-typed#8

[justrhysism]

This, for me is a big blocker from being able to move away from vue-typed to the officially supported implementation.

[justrhysism]

So, in the meantime I created this project to fill the gap: vue-mixin-decorator