Angular升级后angular-highcharts出现Chart类型不兼容错误求助

问题背景 #

升级angular-highcharts（非highcharts-angular）代码时，原Angular 15下正常运行的页面代码出现类型不兼容错误。

原正常HTML代码 #

<div class="row justify-content-center">
    <div class="col-12" *ngIf="chart">
      <div [chart]="chart"></div>
    </div>
  </div>

升级后报错信息 #

Type 'Chart' is not assignable to type 'Chart | StockChart | MapChart | HighchartsGantt | undefined'.
Type 'Chart' is missing the following properties from type 'Chart': refSubject, ref$, ref, addPoint, and 2 more.

当前导入代码 #

import {GraphOptions} from '../../../models/graph-options.model';
import dayjs from 'dayjs';
import {Series} from  'highcharts';
import * as Highcharts from 'highcharts';
import {Chart} from 'angular-highcharts';

当前chart声明代码 #

chart = new Chart(<Chart.Options>{
  chart:        {  type:  'spline', zoomType: 'xy',
    height:       (function () { let retVal = screen.height - 100; if (retVal < 300) retVal = 300;  if (retVal > 600) retVal = 600;   return retVal + 'px'; })() },
  plotOptions:  { series: { states: {  inactive: { opacity: 1 }  }  }  },
  credits:      { enabled: false   },
  xAxis:        { type: 'datetime',  title:   { text: this.translate.instant('DateTime') },
    events:       { setExtremes: (x) => this.setExtremes(x) },
    crosshair:    { snap: false },
    labels:       { style: {  fontSize: '11pt' } } },
  yAxis:        [   { id:         'yAxis-0', title: { text: this.translate.instant('Value') },
    crosshair:  { snap: false, label: { enabled: true, format: '{value:.2f}' } },
    labels:     { style: {  fontSize: '11pt' } } }],
  title:        { text: ''  },
  series:       [],
  time:         { useUTC: false }
});

尝试过的其他定义（构造函数内） #

this.chartRef = new Highcharts.Chart(<Highcharts.Options>{
  chart:        {  type:  'spline', zoomType: 'xy',
    height:       (function () { let retVal = screen.height - 100; if (retVal < 300) retVal = 300;  if (retVal > 600) retVal = 600;   return retVal + 'px'; })() },
  plotOptions:  { series: { states: {  inactive: { opacity: 1 }  }  }  },
  credits:      { enabled: false   },
  xAxis:        { type: 'datetime',  title:   { text: this.translate.instant('DateTime') },
    events:       { setExtremes: (x) => this.setExtremes(x) },
    crosshair:    { snap: false },
    labels:       { style: {  fontSize: '11pt' } } },
  yAxis:        [   { id:         'yAxis-0', title: { text: this.translate.instant('Value') },
    crosshair:  { snap: false, label: { enabled: true, format: '{value:.2f}' } },
    labels:     { style: {  fontSize: '11pt' } } }],
  title:        { text: ''  },
  series:       [],
  time:         { useUTC: false }
});

解决方案 #

错误核心是类型命名冲突：同时导入了highcharts原生Chart类型和angular-highcharts的Chart包装类，TypeScript无法区分二者，导致类型不匹配。

步骤1：修正导入语句，避免命名冲突 #

将angular-highcharts的Chart重命名导入，明确区分原生类型：

import {GraphOptions} from '../../../models/graph-options.model';
import dayjs from 'dayjs';
import {Series} from  'highcharts';
import * as Highcharts from 'highcharts';
// 重命名angular-highcharts的Chart，避免与原生Highcharts.Chart冲突
import {Chart as AngularHighchartsChart} from 'angular-highcharts';

步骤2：使用重命名后的类型声明chart #

替换原代码中的Chart为AngularHighchartsChart，并使用Highcharts.Options作为配置类型：

chart = new AngularHighchartsChart(<Highcharts.Options>{
  chart:        {  type:  'spline', zoomType: 'xy',
    height:       (function () { let retVal = screen.height - 100; if (retVal < 300) retVal = 300;  if (retVal > 600) retVal = 600;   return retVal + 'px'; })() },
  plotOptions:  { series: { states: {  inactive: { opacity: 1 }  }  }  },
  credits:      { enabled: false   },
  xAxis:        { type: 'datetime',  title:   { text: this.translate.instant('DateTime') },
    events:       { setExtremes: (x) => this.setExtremes(x) },
    crosshair:    { snap: false },
    labels:       { style: {  fontSize: '11pt' } } },
  yAxis:        [   { id:         'yAxis-0', title: { text: this.translate.instant('Value') },
    crosshair:  { snap: false, label: { enabled: true, format: '{value:.2f}' } },
    labels:     { style: {  fontSize: '11pt' } } }],
  title:        { text: ''  },
  series:       [],
  time:         { useUTC: false }
});

关键注意事项 #

• angular-highcharts的Chart是对原生Highcharts图表的包装类，内置ref$、addPoint等RxJS相关属性/方法，必须使用该包装类创建实例，才能匹配[chart]输入属性的类型要求。
• 禁止直接使用new Highcharts.Chart()创建实例传给angular-highcharts组件，否则会出现类型不兼容问题。

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