Chart.js与react-chartjs-2中自定义插件及afterDraw回调的TypeScript类型问题

没问题，咱们来把这个类型模糊的问题彻底解决掉，不用再依赖any和禁用ESLint规则啦！

Chart.js本身就提供了完整的TypeScript类型定义，你只需要正确导入并使用这些类型就可以了。下面是具体的修改步骤：

1. 确认类型依赖 #

首先确保你安装的Chart.js版本自带类型定义（v3及以上版本都已经内置了），如果是旧版本，可能需要额外安装类型包：

npm install @types/chart.js --save-dev

2. 导入正确的类型 #

从chart.js中导入核心的Chart类型，它会帮你自动关联图表实例的所有属性类型。

3. 修改插件代码的类型定义 #

把afterDraw回调中的chart参数类型替换为Chart，这样TypeScript就能自动推断出所有属性的正确类型，再也不需要any了。修改后的完整代码如下：

import { Chart } from 'chart.js';

// 假设你的colors和getRgba是已定义的，给它们补充类型让检查更严谨
const colors = {
  white: '#ffffff' as const,
};

const getRgba = (color: string, opacity: number): string => {
  // 这里保留你原本的getRgba实现逻辑
  return color.replace(')', `, ${opacity})`);
};

const plugins = [
  {
    id: "tooltipLine",
    afterDraw: (chart: Chart) => {
      // 用可选链避免tooltip未初始化的类型报错
      if (chart.tooltip?.opacity === 1) {
        const { ctx } = chart;
        const caretX = chart.tooltip.caretX;
        const yScale = chart.scales.y;
        const topY = yScale.top;
        const bottomY = yScale.bottom;

        ctx.save();
        ctx.setLineDash([3, 3]);
        ctx.beginPath();
        ctx.moveTo(caretX, topY - 5);
        ctx.lineTo(caretX, bottomY);
        ctx.lineWidth = 1;
        ctx.strokeStyle = getRgba(colors.white, 0.5);
        ctx.stroke();
        ctx.restore();
      }
    },
  },
];

关键细节说明 #

• chart: Chart：这是Chart.js图表实例的核心类型，包含了所有图表属性和方法的类型定义，TypeScript会自动识别chart.tooltip、chart.scales、chart.ctx等属性的具体类型。
• 可选链?.：用chart.tooltip?.opacity替代直接访问，避免因为tooltip未初始化导致的类型错误，同时符合TypeScript的严谨性要求。
• 更精确的刻度类型（可选）：如果你的y轴是特定类型（比如线性刻度），可以导入对应的LinearScale类型来进一步约束：

  import { Chart, LinearScale } from 'chart.js';
  // ...
  const yScale = chart.scales.y as LinearScale;
  

这样修改之后，所有属性访问都会有正确的类型检查，你完全可以删掉那些ESLint禁用注释啦！

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