Mixin that uses component properties (Vue 2, TypeScript)

Question

I have Vue + TypeScript project, we are using Vue class components. One of component's methods was moved to separate mixin. That mixin uses component's properties. To prevent TypeScript's complaining about missing in mixin properties I created interface with the same name as mixin has:

export interface ExpSelectedHandlerMixin {
  loading: boolean;
  selected: VouchersPoolTable[];
  currentApplication: string;
  items: VouchersPoolTable[];
}

@Component({})
export class ExpSelectedHandlerMixin extends Vue {
   // ...
}

Then connected mixin to my component like that:

import { Mixins } from 'vue-property-decorator';

export default class PageVouchersTable extends Mixins(ExpSelectedHandlerMixin) {
   // ...
}

After that I get error with the text:

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'.

Ok, I made loading, selected, currentApplication, items properties in component public (simply deleted private modifier).

That works.

BUT:

Is it possible somehow to connect mixin that uses component's properties without making those properties public?

Answer 1

Decided to get rid of unnecessary interface declaration in the mixin file and leave shared properties as public in the component. Final version of code is:

// Mixin
@Component({})
export default class ExpSelectedHandlerMixin extends Vue {
  loading = false

  items: VouchersPoolTable[] = []

  selected: VouchersPoolTable[] = []

  // ...
}

// Component
import { Mixins } from 'vue-property-decorator';

@Component({})
export default class PageVouchersTable extends Mixins(ExpSelectedHandlerMixin) {

  // Next three properties are public to be accessible in ExpSelectedHandlerMixin
  loading = false

  items: VouchersPoolTable[] = []

  selected: VouchersPoolTable[] = []

  // ...
}