CODEWITHSUNDEEP
typescriptvue.jsvue-class-components
gbalduzzi
gbalduzzi

Reputation: 10176

Implement typescript generic in Vue mixin using class component

I just migrated my Vue project to Typescript, but there one missing situation I need to manage.

I need to handle some paginated tables in my app, so I created a Table mixin that handles pagination on my collection of records:

@Component
export default class Table<T> extends Vue {
  records: T[] = []

  page: number = 0
  length: number = 20

  get total () {
    return this.records.length
  }

  get visibleRecords(): T[] {
    return this.records.slice(this.page*this.length, (this.page+1)*this.length)
  }

  public changePage (newPage: number) {
    this.page = newPage
  }
}

Each component that renders the table, extends the mixin, populate the records property and simply displays the result of visibleRecords computed property. A basic component:

export default class Sampletable extends Mixins(Table) {

  records: RecordType[] = [ .... my data array ... ]
}

<template>
  <table>
    <tr v-for="record in visibleRecords">
      ....
    </tr>
  </table>
</template>

This works, but by calling 'visibleRecords' I lose the knowledge of my data type (RecordType in the example). What I need is to have typescript understand that visibleRecords (implemented in the mixin) returns the same data type of the records property (that is overridden in the component implementing thr mixin)

I tried to implement the Table mixin with a generic (as you can see in the previous code) but it doesn't work, because I can't define the generic type when extending the Mixin:

export default class Sampletable extends Mixins(Table<RecordType>)

throws an error.

Is there a way to accomplish this? any suggestion?

Upvotes: 0

Views: 2666

Answers (1)

Jay Li
Jay Li

Reputation: 747

Try do it like this:

export default class Sampletable extends Mixins<Table<RecordType>>(Table) {
...

source: https://github.com/vuejs/vue-class-component/issues/289#issuecomment-471388618

Upvotes: 5

Related Questions