Angular中Highcharts无法识别addSingleSeriesAsDrilldown等钻取方法

在Angular项目里用Highcharts的drilldown事件实现异步钻取功能，代码如下：

events: {
    drilldown: function(e): void {
        if (!e.seriesOptions) {
            // e.point.name 记录了点击的柱子信息
            this.showLoading('Simulating Ajax ...');
            const outer = {
                type: 'pie',
                size: '100%',
                innerSize: '75%',
                dataLabels: {
                    enabled: false
                },
                zIndex: 1,
                name: 'Cars',
                data: [
                    {
                        name: 'Other',
                        y: 24,
                        drilldown: 'true',
                    },
                    {
                        name: 'abc',
                        y: 7,
                    },
                    {
                        name: 'def',
                        y: 3,
                    }
                ]
            } as Highcharts.SeriesOptionsType

            this.hideLoading();
            this.addSingleSeriesAsDrilldown(e.point, outer); // 此处编译器报错
            this.applyDrilldown(); // 此处编译器也报错
        }
    },
},

Angular编译器无法识别this下的addSingleSeriesAsDrilldown和applyDrilldown方法，虽然用(this as any)配合ESLint忽略校验能正常编译运行，但希望让编译器正确识别这两个方法。

解决方案 #

1. 显式指定回调中this的类型 #

在drilldown回调函数的参数前，声明this的类型为Highcharts.Chart，利用Highcharts官方提供的类型定义：

drilldown: function(this: Highcharts.Chart, e: Highcharts.DrilldownEventObject): void {
    if (!e.seriesOptions) {
        this.showLoading('Simulating Ajax ...');
        const outer = {
            // 省略series配置
        } as Highcharts.SeriesOptionsType;

        this.hideLoading();
        this.addSingleSeriesAsDrilldown(e.point, outer);
        this.applyDrilldown();
    }
},

通过这种方式，TypeScript可以正确推断this的类型，自动识别钻取相关的方法。

2. 绑定组件上下文并直接使用图表实例 #

如果需要在回调中同时访问组件自身的属性/方法和Highcharts实例，可以先将图表实例保存到组件变量中，再用箭头函数编写回调：

// 组件类中声明变量存储图表实例
chartInstance!: Highcharts.Chart;

// 初始化图表的逻辑中
this.chartInstance = Highcharts.chart('container', {
    // 其他图表配置
    events: {
        drilldown: (e: Highcharts.DrilldownEventObject) => {
            if (!e.seriesOptions) {
                this.chartInstance.showLoading('Simulating Ajax ...');
                const outer = {
                    // 省略series配置
                } as Highcharts.SeriesOptionsType;

                this.chartInstance.hideLoading();
                this.chartInstance.addSingleSeriesAsDrilldown(e.point, outer);
                this.chartInstance.applyDrilldown();
                // 此处可直接访问组件的属性/方法，比如 this.someComponentMethod()
            }
        }
    }
});

箭头函数的this会绑定到组件实例，直接通过保存的chartInstance调用Highcharts方法，既解决类型问题，又能兼顾组件上下文访问。

3. 扩展Highcharts类型定义（特殊场景可选） #

如果官方类型定义缺失这两个方法（极少出现），可以在项目中添加自定义类型扩展文件：

// src/types/highcharts.d.ts
declare module 'highcharts' {
    interface Chart {
        addSingleSeriesAsDrilldown(point: Point, series: SeriesOptionsType): void;
        applyDrilldown(): void;
    }
}

并在tsconfig.json中确保该类型文件被包含，让编译器识别这两个方法。

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