如何在反应打字稿中加载 highcharts 注释模块？答案

【问题标题】：How to load highcharts annotations module in react typescript?如何在反应打字稿中加载 highcharts 注释模块？
【发布时间】：2020-08-29 00:38:43
【问题描述】：

我正在尝试使用注释复制this highcharts 以与打字稿作出反应。正如您在直播的demo 中看到的那样，注释没有显示出来，我认为这是由于一些加载问题。

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

【问题讨论】：

控制台有什么错误吗？

标签： reactjs typescript highcharts

【解决方案1】：

这里是官方link关于如何使用highchart模块

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

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

// init the module
AnnotationsFactory(Highcharts);

导入后你应该使用 HighchartsReact 组件并在那里添加你的注释配置。

这样可以使用任何模块。

【讨论】：

【解决方案2】：

DefinitelyTyped 似乎不知道 highcharts/modules/annotations 模块。所以首先，创建一个单独的文件declarations.d.ts：

declare module "highcharts/modules/annotations";

在 demo.tsx 中：

import * as Highcharts from "highcharts";
import AnnotationsFactory = require("highcharts/modules/annotations");
AnnotationsFactory(Highcharts);

并在传递给Highcharts.chart 的大配置对象之后添加as any，这样TypeScript 就不会抱怨annotations 属性。（您所做的似乎在运行时有效，但过时的类型无法识别。）

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

Final CodeSandbox.

在本地，我遇到了一些依赖问题，不得不禁用 tslint 引号规则，因为它阻止了构建，但我最终让注释工作。如果您在这方面需要帮助，请告诉我。

【讨论】：

感谢您的回答！在本地，我现在收到以下错误：ReferenceError: AnnotationsFactory is not defined 有什么想法吗？
确保将 module 选项更改为 commonjs，否则 TypeScript 将忽略错误的导入分配。如果不是这样，请运行npm run start，在浏览器的开发控制台中打开bundle.js，在文件中搜索AnnotationsFactory，并将文件的相关部分添加到问题中，这样我就可以看到Webpack 做了什么。