In my Vue + TypeScript project, we are utilizing Vue class components. Recently, I moved one of the component's methods to a separate mixin that relies on the component's properties. To address TypeScript errors regarding missing properties in the mixin, I created an interface with the same name as the mixin:
export interface ExpSelectedHandlerMixin {
loading: boolean;
selected: VouchersPoolTable[];
currentApplication: string;
items: VouchersPoolTable[];
}
@Component({})
export class ExpSelectedHandlerMixin extends Vue {
// ...
}
I connected the mixin to my component like this:
import { Mixins } from 'vue-property-decorator';
export default class PageVouchersTable extends Mixins(ExpSelectedHandlerMixin) {
// ...
}
However, I encountered an error message stating:
Class 'PageVouchersTable' incorrectly extends base class 'ExpSelectedHandlerMixin & Vue & object & Record<never, any>'. Type 'PageVouchersTable' is not assignable to type 'ExpSelectedHandlerMixin'. Property 'loading' is private in type 'PageVouchersTable' but not in type 'ExpSelectedHandlerMixin'.
To resolve this, I changed the access modifier of the properties (loading, selected, currentApplication, items) in the component to public by removing the private modifier.
While this solution works, I am left wondering:
Is there a way to connect a mixin that relies on component properties without having to make those properties public?