如何在React+TypeScript项目中使用Highcharts Flowmap并解决类型报错

方法一：自定义类型声明文件 #

这是最直接解决报错的方式，按照TS提示的思路补充声明：

• 在项目src目录下新建types文件夹（无则创建），然后在其中创建highcharts-flowmap.d.ts文件
• 在文件中写入以下代码：

declare module 'highcharts/modules/flowmap' {
  import Highcharts from 'highcharts/highmaps';
  const FlowmapModule: (H: typeof Highcharts) => void;
  export default FlowmapModule;
}

• 打开tsconfig.json，确保include数组包含这个声明文件路径，比如：

{
  "include": [
    "src/**/*",
    "src/types/**/*.d.ts"
  ]
}

方法二：补充官方类型依赖 #

如果项目未安装Highcharts的官方类型包，先执行安装：

npm install @types/highcharts --save-dev
# 或使用yarn
yarn add @types/highcharts --dev

注意：如果官方类型库尚未收录flowmap模块的类型定义，仍需结合方法一的自定义声明文件来解决问题。

验证修改 #

完成上述配置后，重启开发服务器或重新编译项目，原TS7016错误会消失，你可以继续使用原有代码引入并初始化flowmap模块：

import HighchartsMap from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official';
import HighchartsFlowmap from 'highcharts/modules/flowmap';

HighchartsFlowmap(HighchartsMap);

return <HighchartsReact highcharts={HighchartsMap} options={options} constructorType='mapChart' />;

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