如何正确为Highcharts配置对象回调函数的this做类型注解？

问题背景 #

图表功能正常，但TypeScript环境下，Highcharts配置的point.events.click回调中，访问this.category时报错：Property 'category' does not exist on type '{ click: () => void; }'. TS(2339)。已知普通函数与箭头函数的this行为差异，需为this添加正确的类型提示。

解决步骤 #

1. 确保安装Highcharts类型定义
   先确认项目中已安装@types/highcharts包（若未安装，执行npm install @types/highcharts --save-dev）。

2. 导入Point类型
   在代码文件顶部导入Highcharts的Point类型：

   import type { Point } from 'highcharts';
   

3. 为回调函数指定this类型
   在回调函数的参数列表最开头，显式声明this的类型为Point：

   (...)
   point: {
     events: {
       click: function(this: Point) {
         console.log(this)
         emit('result', phishingMap.value[this.category]) // 报错消失
       }
     }
   }
   (...)
   

补充说明 #

• TypeScript允许在普通函数的参数列表开头声明this的类型，用于告知编译器函数执行时this的指向。Highcharts会将当前点击的Point实例绑定为回调的this，因此指定this: Point后，TS就能正确识别this上的属性（如category）。
• 若使用特定类型的图表（如饼图），也可使用更具体的子类（如PiePoint），通用的Point类型已能覆盖绝大多数场景。

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