如何在 highcharts.js 上使用带有打字稿的类型

Question

我读过 the docs regarding typescript on Highcharts 但我仍然不太清楚如何在 highcharts.js 函数中使用类型。

例如，我在 tooltip 选项上有一个 formatter 函数，它接受一个参数 this。我该如何输入？

现在我正在使用 any 但这只是为了绕过打字稿错误。我不想手动输入它以防 Highcharts 在未来的版本中更新其内容，所以我认为有正确的方法吗？

const options = {
    tooltip: {
      outside: true,
      formatter: function (this: any): string {  // <---- need to replace `any` here
      }
    }
}

我应该在那里使用什么类型？我如何准确地找出我应该使用其中的哪一个？

我试过使用 Highcharts.TooltipFormatterCallbackFunction，因为这似乎是 the callback docs 中显示的内容。

formatter: function (this: Highcharts.TooltipFormatterCallbackFunction): string {

但它似乎无法识别 this 对象中的属性 y。 this.y。也许那是 return 类型？我在哪里可以找到 this 的那个？

与 plotOptions.column.point.events.mouseOver 相同的问题：

plotOptions: {
    column: {
        point: {
            events: {
                mouseOver: function (this: any) { //<-- here
                    this.graphic.attr({
                       fill: this.y < 0 ? "red" : "blue",
                    });
                }
            }
        }
    }
}

Answer 1

您可以在 Highcharts 中检查正确的类型 API。

对于工具提示格式化程序函数中的 this 使用：Highcharts.TooltipFormatterContextObject

对于 this 在鼠标悬停回调函数时使用：Highcharts.Point

API参考：

https://api.highcharts.com/class-reference/Highcharts#.TooltipFormatterCallbackFunction

https://api.highcharts.com/class-reference/Highcharts#.PointMouseOverCallbackFunction

如何在 highcharts.js 上使用带有打字稿的类型

How to use types with typescript on highcharts.js

highcharts

react-highcharts