react-chartjs-2结合TypeScript使用doughnutlabel插件报类型错误如何解决

错误根因 #

你遇到的类型报错来自两个核心问题：

• ChartOptions 是泛型类型，必须传入对应的图表类型作为泛型参数才可以正常使用，你没有指定泛型所以即使是空对象也会触发报错
• @scottalan/chartjs-plugin-doughnutlabel 是第三方插件，它的配置项类型没有被默认注册到Chart.js的类型系统中，所以TS识别不到doughnutlabel 配置字段
• 额外注意：react-chartjs-2 v4对应Chart.js v3版本，你当前写的legend、title 顶层配置是v2版本的写法，v3中这两个配置已经迁移到plugins 字段下，不调整的话配置不会生效。

具体修复步骤 #

1. 导入并注册doughnutlabel插件 #

你当前只注册了Chart.js的内置模块，没有注册插件本身，先补充导入和注册逻辑：

// 顶部导入插件
import DoughnutLabel from '@scottalan/chartjs-plugin-doughnutlabel';
// 注册内置模块+插件
Chart.register(...registerables, DoughnutLabel);

2. 给ChartOptions指定泛型 #

将const options: ChartOptions 改为指定环形图类型的泛型写法：

const options: ChartOptions<'doughnut'> = {
  // 配置内容
}

3. 修复配置写法+补充类型识别 #

快速临时解决

如果只是临时跳过类型检查，可以给doughnutlabel 字段加// @ts-ignore 注释跳过校验，同时调整legend、title的配置位置：

const options: ChartOptions<'doughnut'> = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
      position: 'top',
    },
    title: {
      display: true,
      // v3中fontSize改为font.size
      font: {
        size: 20
      },
      text: 'My Title'
    },
    // @ts-ignore 跳过第三方插件类型校验
    doughnutlabel: {
      labels: [
        {
          text: "Foo",
          font: {
            size: '60',
            family: 'Arial, Helvetica, sans-serif',
            style: 'italic',
            weight: 'bold'
          },
          color: '#bc2c1a'
        }
      ]
    }
  }
}

永久类型修复

如果需要长期维护项目，推荐在项目src目录下新建chart.d.ts类型声明文件，扩展Chart.js的类型系统：

import type { ChartType } from 'chart.js';

declare module 'chart.js' {
  interface PluginOptionsByType<TType extends ChartType> {
    // 扩展doughnutlabel插件的类型定义
    doughnutlabel?: {
      labels?: Array<{
        text: string;
        font?: {
          size?: string | number;
          family?: string;
          style?: string;
          weight?: string | number;
        };
        color?: string;
      }>;
    };
  }
}

添加后不需要再加@ts-ignore注释，TS可以正常识别doughnutlabel配置字段。

内容的提问来源于stack exchange，提问作者Kyle