title: Implement typescript generic in Vue mixin using class component
body: <p>I just migrated my Vue project to Typescript, but there one missing situation I need to manage.</p>
  <p>I need to handle some paginated tables in my app, so I created a <code>Table</code> mixin that handles pagination on my collection of records:</p>
  <pre><code>@Component
  export default class Table&lt;T&gt; 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
    }
  }
  </code></pre>
  <p>Each component that renders the table, extends the mixin, populate the <code>records</code> property and simply displays the result of <code>visibleRecords</code> computed property. A basic component:</p>
  <pre><code>export default class Sampletable extends Mixins(Table) {
  
    records: RecordType[] = [ .... my data array ... ]
  }
  
  &lt;template&gt;
    &lt;table&gt;
      &lt;tr v-for=&quot;record in visibleRecords&quot;&gt;
        ....
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/template&gt;
  </code></pre>
  <p>This works, but by calling 'visibleRecords' I lose the knowledge of my data type (<code>RecordType</code> in the example). What I need is to have typescript understand that <code>visibleRecords</code> (implemented in the mixin) returns the same data type of the <code>records</code> property (that is overridden in the component implementing thr mixin)</p>
  <p>I tried to implement the <code>Table</code> 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:</p>
  <pre><code>export default class Sampletable extends Mixins(Table&lt;RecordType&gt;)
  </code></pre>
  <p>throws an error.</p>
  <p>Is there a way to accomplish this? any suggestion?</p>