React Typescript项目使用React Apexcharts出现类型错误如何解决

错误原因 #

该类型报错是因为TypeScript无法自动推导你声明的options、series对象符合ApexChart要求的类型规范，导致类型校验不通过，同时你原代码中还存在变量未声明、入参类型未定义的问题。

具体修复步骤 #

• 导入ApexChart官方提供的类型定义，同时补全组件Props的类型声明
• 给options变量显式指定ApexOptions类型
• 给series变量补充声明关键字和类型注解

修复后的完整代码 #

import React from 'react';
import ReactApexChart from 'react-apexcharts';
import type { ApexOptions, Series } from 'apexcharts';

// 补全组件入参的类型定义，可根据你实际的tasks类型调整
interface Props {
  tasks: any[]
}

const TasksChart: React.FC<Props> = ({
  tasks,
}) => {

  // 显式指定options的类型为ApexOptions
  const options: ApexOptions = {
    chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: true
      }
    },
  };

  // 补充const声明和Series类型注解
  const series: Series[] = [{
    name: 'All Tasks',
    data: [31, 40, 28, 51, 42, 109, 100]
  }, {
    name: 'My Tasks',
    data: [11, 32, 45, 32, 34, 52, 41]
  }]

  return (
    <>
      <ReactApexChart options={options} series={series} type="line" height={350} />
    </>
  );
};

export default TasksChart;

临时快速修复方案 #

如果只是临时调试不想补充完整类型，也可以直接使用类型断言跳过校验，不推荐生产环境使用：

<ReactApexChart 
  options={options as ApexOptions} 
  series={series as Series[]} 
  type="line" 
  height={350} 
/>

如果修改后仍有报错，可检查apexcharts和react-apexcharts的版本兼容性，重新安装依赖即可：

npm install apexcharts react-apexcharts

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