使用 Typescript 的反应式 Vue Chart.js 组件

Posted 2023-02-23

【中文标题】使用 Typescript 的反应式 Vue Chart.js 组件

【英文标题】：Reactive Vue Chart.js component using Typescript

【发布时间】：2020-01-29 15:30:39

【问题描述】：

使用vue-property-decorator（或实际上是Component 和vue-class-component 中的Prop）和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：“BarChart”类型上不存在属性“renderChart”。

因此，当使用@Component(extends: Bar) 时，对于解释器来说，不清楚该组件是否扩展了Bar。我已经尝试扩展Bar 而不是Vue，所以export default class BarChart extends Bar。但这会产生以下错误：

TypeError: Super expression 必须为 null 或函数

任何想法如何解决这个问题？

【参考方案1】：

你可以在BarChart类中显式定义你想使用的函数

  public renderChart!: (chartData: any, options: any) => void