升级Angular、Highcharts并迁移官方封装后访问系列数据遇TS类型错误

问题原因 #

SeriesOptionsType是Highcharts中多种系列配置的联合类型，其中部分特殊系列（如Abands）并不包含data属性。TypeScript在严格类型检查下，会阻止对联合类型中不存在的属性进行直接访问，因此直接执行this.chart.series[0].data = [...data]会触发类型错误。

解决方案（均避免使用any类型） #

方案1：使用类型守卫窄化类型 #

自定义类型守卫函数，判断当前系列是否包含data属性，让TypeScript确认类型后再访问：

import * as Highcharts from 'highcharts';

// 类型守卫函数
function hasData(series: Highcharts.SeriesOptionsType): series is Highcharts.SeriesOptions & { data: Highcharts.SeriesDataOptionsType } {
  return 'data' in series;
}

// 使用示例
const targetSeries = this.chart.series[0];
if (hasData(targetSeries)) {
  targetSeries.data = [...data];
  // 手动触发图表更新
  this.chart.redraw();
}

方案2：明确指定具体系列类型 #

如果你的图表固定使用带data属性的系列（如折线图、柱状图），在定义图表配置时直接指定具体的系列类型，而非宽泛的SeriesOptionsType：

chartOptions: Highcharts.Options = {
  series: [
    {
      type: 'line',
      data: []
    } as Highcharts.SeriesLineOptions // 明确指定为折线系列类型
  ]
};

后续访问this.chart.series[0]时，TypeScript会识别为指定的系列类型，可直接访问data属性。

方案3：使用Highcharts官方API更新数据（推荐） #

Highcharts提供了setData方法用于更新系列数据，这是官方推荐的规范方式，无需处理类型问题，同时会自动触发图表重绘：

// 第二个参数为true表示更新后自动重绘图表
this.chart.series[0].setData([...data], true);

补充说明 #

直接修改series.data属性可能会绕过Highcharts内部的数据校验和状态更新逻辑，使用setData方法能确保图表状态的一致性，减少潜在的运行时问题。

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