Mixins with typescript (options SFC not class)

I think I am being dense.
I have a mixin defined as…

import Vue from "vue";

export const cohortsMixin = Vue.extend({
  computed: {
    cohorts(): Cohort[] {
      const cohorts = this.$store.getters["Cohort/listAll"] || [];

      ...do some magic and return 

      return filteredCohorts;
    }
  }
});

I think i need to write a declareation file (.d.ts) for the mixin otherwise i get:
"Property ‘cohorts’ does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, " warning

Then in the components i have

import cohortsMixin from "@/mixins/cohort.ts";

...
....
mixins: [cohortsMixin],
computed: {
cohortMagic(): string {
 // Do something with mixins cohort
// Error: Property 'cohorts' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, 
}

I know i am doing something very wrong, any help?

D

Use the npm package ‘vue-typed-mixins’, that solves the issue.

1 Like

@tminich thanks for that.