[Typescript + vue-class style components] Argument of type 'typeof UsageChart' is not assignable to parameter of type 'VueClass<Vue>'

Hello. I’m having an issue using the typescript sample that’s in the docs. The compiler complains about types. Any ideas how can I fix this?

The code:

Full error:

Argument of type 'typeof UsageChart' is not assignable to parameter of type 'VueClass<Vue>'. Type 'typeof UsageChart' is not assignable to type 'VueConstructor<Vue>'. Types of parameters 'options' and 'options' are incompatible. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, Line, object, object, never> | undefined'. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<Vue, Line, object, object, never>'. Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ComponentOptions<Vue, DataDef<Line, Record<never, any>, Vue>, object, object, never[], Record<never, any>>'. Type 'DefaultData<Vue>' is not assignable to type 'DataDef<Line, Record<never, any>, Vue>'. Type 'object' is not assignable to type 'DataDef<Line, Record<never, any>, Vue>'. Type 'object' is not assignable to type '(this: Readonly<Record<never, any>> & Vue) => Line'. Type '{}' provides no match for the signature '(this: Readonly<Record<never, any>> & Vue): Line'.ts(2345)

Environment

• vue.js version: 2.6.8
• vue-chart.js version: 3.4.2
• npm version: 6.8.0

[Djaler]

You should use it like this:

<script lang="ts">
import { Bar } from 'vue-chartjs';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  extends: Bar,
})
export default class CommitChart extends Bar {
}
</script>

[RCVZ]

The solution that worked for me is to extend the vue Mixins , like in the example below.

</script>
export default class DoughnutChart extends Mixins(Doughnut) {
}
</script>