Angular中使用Amcharts5适配器设置柱形图颜色报类型错误如何解决

问题本质 #

这不是TSLint校验问题，是TypeScript静态类型推断不匹配导致的报错：Amcharts5的adapter回调参数target默认是泛型类型O，没有被自动推断为当前场景下实际的RoundedRectangle实例类型，因此传入series.columns.indexOf时触发类型不匹配提示。
你代码运行正常是因为实际运行时JavaScript没有静态类型校验，target确实是符合要求的RoundedRectangle实例，所以原有逻辑可以正常执行。

解决方案 #

任选以下任意一种方式修复即可，不会改动原有运行逻辑：

方案1：给target做显式类型断言 #

改动最小，适合临时修复：

// 提前引入类型（如果TS提示找不到对应类型时添加）
import type { RoundedRectangle } from "@amcharts/amcharts5/.internal/core/render/RoundedRectangle";

series.columns.template.adapters.add('fill', (fill, target) => {
  // 显式断言target为RoundedRectangle类型
  return chart.get('colors').getIndex(series.columns.indexOf(target as RoundedRectangle));
});

方案2：给adapter的add方法指定泛型参数 #

更规范的写法，显式声明适配器的属性类型和目标类型：

// 提前引入类型（如果TS提示找不到对应类型时添加）
import type { Color } from "@amcharts/amcharts5/.internal/core/util/Color";
import type { RoundedRectangle } from "@amcharts/amcharts5/.internal/core/render/RoundedRectangle";

// 第一个泛型参数为fill属性的类型Color，第二个为target的类型RoundedRectangle
series.columns.template.adapters.add<Color, RoundedRectangle>('fill', (fill, target) => {
  return chart.get('colors').getIndex(series.columns.indexOf(target));
});

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