0

我刚刚将我的 Vue 项目迁移到 Typescript，但是我需要处理一个缺失的情况。

我需要在我的应用程序中处理一些分页表，所以我创建了一个Tablemixin 来处理我的记录集合的分页：

@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
  }
}

呈现表格、扩展 mixin、填充records属性并简单地显示visibleRecords计算属性的结果的每个组件。一个基本组件：

export default class Sampletable extends Mixins(Table) {

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

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

这行得通，但是通过调用“visibleRecords”，我失去了我的数据类型的知识（RecordType在示例中）。我需要让打字稿理解visibleRecords（在mixin中实现）返回records属性的相同数据类型（在实现thr mixin的组件中被覆盖）

我尝试Table使用泛型实现 mixin（如您在前面的代码中所见），但它不起作用，因为在扩展 Mixin 时我无法定义泛型类型：

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

引发错误。

有没有办法做到这一点？有什么建议吗？

4

1 回答 1

2

尝试这样做：

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

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

于 2020-06-25T14:37:51.623 回答