使用Next.js+Chart.js时WebStorm为何报TypeScript类型错误？

我在开发Next.js 13.0.6项目时，使用Chart.js@4.3.0和react-chartjs-2@5.2.0，项目可正常编译，但WebStorm持续提示TypeScript类型错误。

最小复现代码（原代码存在语法错误） #

// pages/index.tsx
import { Chart, registerables }
import { Line } from 'react-charts-j2'

const Index () => {
  const chart = {
    data: {
      labels: ['foo', 'bar', 'foobar', 'foobaz']
      datasets: [
        {
          label: 'Foo',
          data: [0, 1, 2, 3]
        }
      ]
    }
  }
  return (
    <Line data={chart.data} />
  )
}

IDE错误提示 #

Type {datasets: {data: number[], label: string}[], labels: string[]} is not assignable to type ChartData<"line", TData, TLabel>

环境信息 #

• Next.js: 13.0.6
• React: 18.2.0
• Node: 18.12.1
• TypeScript: ^5.0.4

已尝试的方法 #

给Line组件传入<Line<Array<number>, string>泛型参数，未解决问题。

问题原因分析 #

这个问题以代码本身的语法/类型问题为主，IDE缓存可能是次要因素：

1. 代码存在多处语法错误：
   • 导入包名拼写错误：react-charts-j2应为react-chartjs-2
   • 函数定义缺失关键字：const Index () => {应改为const Index = () => {
   • 对象属性间缺少逗号：labels数组后未加逗号，导致语法结构错误
   • 未注册Chart.js组件：Chart.register(...registerables)未调用，Chart.js无法正常初始化
2. TypeScript类型推断不足：
   即使修复语法错误，TypeScript无法自动将chart.data推断为ChartData<'line'>类型，需要显式标注。

解决步骤 #

1. 修复代码并显式指定类型 #

修正后的完整代码：

// pages/index.tsx
import { Chart, registerables } from 'chart.js';
import { Line } from 'react-chartjs-2';
import type { ChartData } from 'chart.js';

// 注册Chart.js的所有必需组件
Chart.register(...registerables);

const Index = () => {
  // 显式标注数据类型为ChartData<'line'>
  const chartData: ChartData<'line'> = {
    labels: ['foo', 'bar', 'foobar', 'foobaz'],
    datasets: [
      {
        label: 'Foo',
        data: [0, 1, 2, 3],
      },
    ],
  };

  return <Line data={chartData} />;
};

export default Index;

2. 清理IDE缓存（如修复后仍提示错误） #

• 打开WebStorm，执行File > Invalidate Caches... > Invalidate and Restart
• 检查IDE的TypeScript版本设置，确保使用项目本地的TypeScript版本（路径：Settings > Languages & Frameworks > TypeScript）

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