TypeScript下时间类型折线图x为字符串的类型兼容问题

环境版本 #

• chart.js: 4.3.0
• react-chartjs-2: 5.2.0
• chartjs-adapter-date-fns: 3.0.0
• chartjs-plugin-datalabels: 2.2.0

问题描述 #

需要创建时间类型折线图，数据集的x为日期格式字符串、y为数字，已通过StatPointDto类（x为string，y为number）封装数据，显式声明ChartData类型后，TypeScript抛出类型不兼容错误：

Types of property 'data' are incompatible.
Type 'StatPointDto[]' is not assignable to type '(number | Point | null)[]'.
Type 'StatPointDto' is not assignable to type 'number | Point | null'.
Type 'StatPointDto' is not assignable to type 'Point'.
Types of property 'x' are incompatible.
Type 'string' is not assignable to type 'number'.

解决方案 #

1. 显式指定ChartData的泛型参数 #

默认情况下，Chart.js的Point类型要求x为数字，而时间类型折线图需要接受字符串格式的日期，因此需要为ChartData指定匹配你数据结构的泛型：

import { ChartData } from 'chart.js';
import { Line } from 'react-chartjs-2';

// 你的StatPointDto类
class StatPointDto {
  x: string;
  y: number;
  constructor(x: string, y: number) {
    this.x = x;
    this.y = y;
  }
}

// 声明ChartData时指定泛型为折线图类型+你的数据点类型
const chartData: ChartData<'line', StatPointDto[]> = {
  datasets: [
    {
      label: '统计数据',
      data: [new StatPointDto('2024-01-01', 10), new StatPointDto('2024-01-02', 20)],
      borderColor: '#36A2EB',
      backgroundColor: '#9BD0F5',
    },
  ],
};

2. 确保x轴配置为时间类型 #

同时必须在图表配置中把x轴类型设为time，并确保已正确引入日期适配器（chartjs-adapter-date-fns），让Chart.js能够解析字符串格式的日期：

const chartOptions = {
  scales: {
    x: {
      type: 'time',
      time: {
        // 根据你的日期字符串格式设置解析规则，可选
        parser: 'YYYY-MM-DD',
        // tooltip显示格式
        tooltipFormat: 'YYYY-MM-DD',
      },
      title: {
        display: true,
        text: '日期',
      },
    },
    y: {
      title: {
        display: true,
        text: '数值',
      },
    },
  },
};

// 渲染组件
<Line data={chartData} options={chartOptions} />

3. 不推荐：类型断言（仅临时应急） #

如果上述方法无法快速生效，可临时使用类型断言绕过检查，但会失去TypeScript的类型保护，不建议长期使用：

datasets: [
  {
    data: yourStatPointDtoArray as unknown as (number | Point | null)[],
    // 其他配置
  },
]

内容的提问来源于stack exchange，提问作者Cécile Fecherolle