React+TypeScript环境下Highcharts点添加渐变填充出现TS错误如何解决

• TypeScript报错的核心是Highcharts.setOptions的colors字段默认被类型定义推导为string[]类型，而你map返回的径向渐变配置对象和字符串类型不匹配，触发了TS2322类型错误。
• 实际上Highcharts运行时本身完全支持将渐变配置对象作为合法颜色值，该错误只是类型定义层面的校验不匹配，不是代码逻辑本身的问题。

直接对返回的渐变配置数组添加类型断言，告知TypeScript该值符合Highcharts的合法颜色类型要求即可，修改后的代码如下：

import Highcharts from 'highcharts';

Highcharts.setOptions({
    // 这里添加类型断言，跳过默认的string[]校验
    colors: Highcharts.getOptions().colors.map(function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.color(color).brighten(-0.2).get('rgb')]
            ]
        };
    }) as unknown as Highcharts.ColorType[]
});

如果需要更严格的类型校验，也可以显式声明返回值为Highcharts的渐变对象类型：

import Highcharts, { GradientColorObject } from 'highcharts';

Highcharts.setOptions({
    colors: Highcharts.getOptions().colors.map(function (color): GradientColorObject {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.color(color).brighten(-0.2).get('rgb')]
            ]
        };
    }) as GradientColorObject[]
});

修改后即可正常编译，渐变效果和原生JS实现的效果完全一致。

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