ChartJS线段TS错误：ScriptableLineSegmentContext不存在chart属性

使用Chart.js的线段（segment）功能时遇到TypeScript类型报错，相关代码如下：

segment: {
    borderDash: context => unreachableDash(context, [5, 5]) || [5, 0],
    borderColor: context => unreachableColor(context, "#B5B5C3") || "#3DC0FF",
    backgroundColor: (context) => {
        let {ctx, chartArea} = context.chart;
        return unreachableBgColor(context, this.getGradientUnreachable(ctx, chartArea)) || this.getGradient(ctx, chartArea)
    }
}

需求是根据数值设置多种渐变背景。当将backgroundColor的context参数设为any类型，或添加// @ts-ignore忽略报错时，代码可正常运行；但使用正确的ScriptableLineSegmentContext类型时，访问context.chart会触发错误：

TS2339: Property 'chart' does not exist on type 'ScriptableLineSegmentContext'.

目前仅尝试了any类型和忽略报错的临时方案，希望找到更规范的解决办法。

1. 类型断言（Type Assertion） #

通过类型断言明确告知TypeScriptcontext包含chart属性，这是最直接的临时解决方式：

backgroundColor: (context: ScriptableLineSegmentContext) => {
    // 断言context包含chart属性并指定其类型
    const { ctx, chartArea } = (context as ScriptableLineSegmentContext & { chart: Chart });
    return unreachableBgColor(context, this.getGradientUnreachable(ctx, chartArea)) || this.getGradient(ctx, chartArea);
}

或者拆分断言步骤，可读性更强：

backgroundColor: (context: ScriptableLineSegmentContext) => {
    const chart = context.chart as Chart;
    const { ctx, chartArea } = chart;
    return unreachableBgColor(context, this.getGradientUnreachable(ctx, chartArea)) || this.getGradient(ctx, chartArea);
}

2. 扩展Chart.js类型定义 #

如果项目中多次用到该场景，可以通过自定义类型声明文件扩展ScriptableLineSegmentContext的类型：
在项目根目录创建chartjs.d.ts文件，内容如下：

import { ScriptableLineSegmentContext, Chart } from 'chart.js';

declare module 'chart.js' {
    interface ScriptableLineSegmentContext {
        chart: Chart;
    }
}

配置后，整个项目中ScriptableLineSegmentContext都会自动包含chart属性，无需每次手动断言。

3. 升级Chart.js版本 #

部分旧版本的Chart.js类型定义存在属性遗漏问题，尝试升级到最新稳定版，可能官方已经修复了该类型缺失的bug。

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