Question

我正在尝试使用与打字稿反应的注释来复制this高图。正如您在实时demo中看到的那样，注释未显示，我认为是由于某些加载问题所致。

import * as React from "react";
import * as Highcharts from "highcharts";
import * as Annotations from "highcharts/modules/annotations";

Answer 1

DefinitelyTyped似乎不了解function promiseTRRARNOSG() { // same function body after here.模块。因此，首先，使用以下命令创建一个单独的文件highcharts/modules/annotations：

declarations.d.ts

在demo.tsx中：

declare module "highcharts/modules/annotations";

并在将大配置对象传递到import * as Highcharts from "highcharts"; import AnnotationsFactory = require("highcharts/modules/annotations"); AnnotationsFactory(Highcharts);之后添加as any，以使TypeScript不会抱怨Highcharts.chart属性。（您正在执行的操作似乎在运行时有效，但过时的输入无法识别。）

最后，在annotations中，将tsconfig.json选项从module更改为esnext，以便能够使用导入分配。

Final CodeSandbox。

在本地，我遇到了一些依赖性问题，由于它阻止了构建，因此不得不禁用tslint quotemark规则，但最终使注释生效。让我知道您是否需要有关该部分的帮助。

Answer 2

这是有关如何使用highchart模块的官方link

在此代码示例中，显示了如何导入highchart组件

import Highcharts from 'highcharts'
import AnnotationsFactory from "highcharts/modules/annotations";
import HighchartsReact from 'highcharts-react-official'

// init the module
AnnotationsFactory(Highcharts);

导入后，您应该使用 HighchartsReact 组件并在其中添加注释配置。

通过这种方式，可以使用任何模块。

如何在React TypeScript中加载highcharts注释模块？

2 个答案: