我使用vue 3已经有几个月了，在一个新的项目中我想使用chart.js -所以我找到了vue-chartjs，我认为它会有所帮助。链接中显示的示例是用“options”API编写的，但我一直在使用“composition”API，所以希望在vue-chartjs中使用它。我也在使用typescript，但是我在使用composition API版本时遇到了一个ts错误，代码无法运行。下面是最初的例子，启用了typescript（仍然可以正常工作）

<template>
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script lang="ts">
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
}
</script>

.和我的转换，使用composition API：

<script lang="ts">
  import { ref, onBeforeMount } from 'vue'
  import { Bar } from 'vue-chartjs'

  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

  const chartData = ref({
          labels: [ 'January', 'February', 'March' ],
          datasets: [ { data: [50, 30, 12] } ]
        });
  const chartOptions = ref( {
          responsive: true
        });
      
  onBeforeMount(() => {
      ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
      console.log('bartest: onBeforeMount');
  })
  
</script>

<template>
  <Bar
    :chartOptions = "chartOptions"
    :chartData="chartData"
  />
</template>

但是现在我在模板中使用Bar时出现了一个错误：
类型“{ chartOptions：{响应：public boolean; } chartData：{ labels：string[]; datasets：{ data：number[];“}[]; }; }”不能分配给类型为“{只读数据：ChartData<“bar”，（number| [数字，数字]| null）[]，unknown>;只读选项？：_DeepPartialObject<CoreChartOptions<“bar”> & ElementChartOptions<“bar”> & PluginChartOptions <...>& DatasetChartOptions <...>& ScaleChartOptions <...>& BarControllerChartOptions>| undefined;. 14更多...; style？：.类型“{ chartOptions：{响应：public boolean; } chartData：{ labels：string[]; datasets：{ data：number[];}[]; }; }'但在类型'{ readonly data：ChartData<“bar”，（number| [数字，数字]| null）[]，unknown>;只读选项？：_DeepPartialObject<CoreChartOptions<“bar”> & ElementChartOptions<“bar”> & PluginChartOptions <...>& DatasetChartOptions <...>& ScaleChartOptions <...>& BarControllerChartOptions>| undefined;. 14更多...; style？：...'.ts（2345）
并且还
types.d.ts（12，5）：这里声明了“data”。
types.d.ts表明data有一个类型ChartData，但如果我尝试：

const chartData : ChartData  = ref({....

那么我有一个不同的错误
类型“Ref<{ labels：string[]; datasets：{ data：number[];}[]; }>“，但在类型”ChartData<keyof ChartTypeRegistry，（number）“中是必需的|[数字，数字]|点|BubbleDataPoint| null）[]，unknown_. ts（2741）
当我尝试运行这段代码时，我得到：
[Vue warn]：缺少必需的属性：“data”at <Anonymous chartOptions= {responsive：true} chartData= {labels：数组（3），数据集：Array（1）} > at.
随后出现了许多错误。
那么，为什么没有类型定义的“选项API”版本很高兴，以及我如何键入“组合API”版本？