使用 Typescript 的 Reactive Vue Chart.js 组件
Reactive Vue Chart.js component using Typescript
使用 vue-property-decorator (or actually its Component
and Prop
of vue-class-component) and vue-chartjs-typescript,我试图制作一个具有 chartData
和 options
属性的 BarChart
组件。以下代码在为应用程序提供服务时实际有效:
<script lang="ts">
import { Bar, mixins } from 'vue-chartjs-typescript'
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
const { reactiveProp } = mixins
@Component({
extends: Bar,
mixins: [reactiveProp],
})
export default class BarChart extends Vue {
@Prop()
chartData: any
@Prop({default: function () { return {} }})
options!: object
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
但是,构建应用程序时失败了。我的 IDE (PyCharm Pro) 也给出同样的错误:
TS2339: Property 'renderChart' does not exist on type 'BarChart'.
因此,当使用 @Component({extends: Bar})
时,解释器并不清楚该组件是否扩展了 Bar
。我已经尝试扩展 Bar
而不是 Vue
,所以 export default class BarChart extends Bar
。但这会产生以下错误:
TypeError: Super expression must either be null or a function
有解决此问题的想法吗?
您可以在 class BarChart
中明确定义要使用的函数
public renderChart!: (chartData: any, options: any) => void
使用 vue-property-decorator (or actually its Component
and Prop
of vue-class-component) and vue-chartjs-typescript,我试图制作一个具有 chartData
和 options
属性的 BarChart
组件。以下代码在为应用程序提供服务时实际有效:
<script lang="ts">
import { Bar, mixins } from 'vue-chartjs-typescript'
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
const { reactiveProp } = mixins
@Component({
extends: Bar,
mixins: [reactiveProp],
})
export default class BarChart extends Vue {
@Prop()
chartData: any
@Prop({default: function () { return {} }})
options!: object
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
但是,构建应用程序时失败了。我的 IDE (PyCharm Pro) 也给出同样的错误:
TS2339: Property 'renderChart' does not exist on type 'BarChart'.
因此,当使用 @Component({extends: Bar})
时,解释器并不清楚该组件是否扩展了 Bar
。我已经尝试扩展 Bar
而不是 Vue
,所以 export default class BarChart extends Bar
。但这会产生以下错误:
TypeError: Super expression must either be null or a function
有解决此问题的想法吗?
您可以在 class BarChart
public renderChart!: (chartData: any, options: any) => void