Блог

У меня есть Vue TypeScript проект, которым мы пользуемся Vue class components . Один из методов компонента был перенесен в отдельный миксин. Этот миксин использует свойства компонента. Чтобы предотвратить TypeScript жалобы на отсутствие в свойствах mixin, я создал интерфейс с тем же именем, что и у mixin:

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

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

Затем подключил миксин к моему компоненту вот так:

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

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

После этого я получаю ошибку с текстом:

Класс ‘PageVouchersTable’ неверно расширяет базовый класс ‘ExpSelectedHandlerMixin amp; Vue amp; объект и запись<никогда, никаких>’. Тип «PageVouchersTable» не может быть присвоен типу «ExpSelectedHandlerMixin». Свойство «загрузка» является частным в типе «PageVouchersTable», но не в типе «ExpSelectedHandlerMixin».

Хорошо, я сделал loading , selected , currentApplication , items свойства в компоненте public (просто удалил private модификатор).

Это работает.

но:

Можно ли как-то подключить миксин, который использует свойства компонента, не создавая эти свойства public ?

Решил избавиться от ненужного объявления интерфейса в файле mixin и оставить общие свойства, как public в компоненте. Окончательная версия кода-это:

 // 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[] = []

  // ...
}