自定义插件和afterDraw回调Chart.js和react-chattjs-2的TypeScript问题

Question

现在推断出chart的类型，但我希望使用正确的类型，而不必解决使用any和禁用规则的问题。

const plugins = [
{
id: "tooltipLine",
afterDraw: (chart: { tooltip?: any; scales?: any; ctx?: any }) => {
/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
if (chart.tooltip.opacity === 1) {
const { ctx } = chart;
const { caretX } = chart.tooltip;
const topY = chart.scales.y.top;
const bottomY = chart.scales.y.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();
}
/* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
},
},
];

Answer 1

您需要从Chart.js导入插件接口并键入代码：

import {
Chart,
Plugin
} from 'chart.js';
const plugins: Plugin[] = [{
id: "tooltipLine",
afterDraw: (chart) => {
if (chart.tooltip.opacity === 1) {
const {
ctx
} = chart;
const {
caretX
} = chart.tooltip;
const topY = chart.scales.y.top;
const bottomY = chart.scales.y.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();
}
}
}];