如何为am5Chart的series属性指定正确类型以解决ESLint报错？

问题说明 #

在Angular项目里用am5Chart开发图表时，把组件的series属性声明为any类型，触发了ESLint类型校验错误，需要替换成正确的类型来修复。

解决方案 #

从你的代码能看到，this.series实际被赋值为am5flow.Sankey实例，所以直接把类型声明为am5flow.Sankey就行：

// 替换原来的 series: any;
series: am5flow.Sankey | undefined; // 建议初始化为undefined，避免未赋值的类型警告

如果后续这个属性可能会被赋值为其他am5系列类型，还可以用联合类型，比如同时兼容XY图表系列和Sankey：

series: am5xy.XYSeries | am5flow.Sankey | undefined;

修改后的组件类代码片段 #

export class SampleComponent implements AfterViewInit {
  private root: am5.Root = am5.Root.new('chartdiv1');
  root1: am5.Root = am5.Root.new('chartdiv1');

  // 正确的类型声明
  series: am5flow.Sankey | undefined; 
  data = [
    {
      date: '2013-01-16',
      market0: 71,
      market1: 75,
      sales0: 5,
      sales1: 9,
    },
    {
      date: '2013-01-30',
      market0: 81,
      market1: 85,
      sales0: 4,
      sales1: 7,
    },
  ];

  // ... 其余代码保持不变
}

补充说明 #

• am5的所有类型都可以从对应的导入模块中获取，比如am5flow.Sankey来自@amcharts/amcharts5/flow，am5xy.XYSeries来自@amcharts/amcharts5/xy
• 给属性加上| undefined是为了符合严格模式下的类型校验要求，避免未初始化的报错

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