TypeScript环境使用Chart.js遇“Cannot find name Chart”问题求助

方案一：使用ES模块（推荐） #

步骤1：安装必要依赖 #

Chart.js的ES模块版本依赖@kurkle/color，直接安装两者：

npm install chart.js @kurkle/color

步骤2：替换为ES模块导入 #

修改你的TS文件，改用模块方式引入Chart：

import { Chart } from 'chart.js';
import { diagnosisHistoryProps } from './patientsData.js';

function chartData(diagnosis_history: diagnosisHistoryProps) {
  const bloodPressureHTML = <HTMLCanvasElement>document.getElementById('blood-pressure');

  if (bloodPressureHTML) {
    new Chart(bloodPressureHTML, {
      type: 'line',
      data: {
        labels: diagnosis_history.map((row) => row.year),
        datasets: [
          {
            label: 'Blood Pressure',
            data: diagnosis_history.map(
              (row) => row.blood_pressure.diastolic.value
            ),
          },
        ],
      },
    });
  }
}

export default chartData;

步骤3：调整tsconfig配置 #

确保TypeScript能正确解析ES模块，更新tsconfig.json：

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "target": "ES2022",
    "outDir": "dist",
    "rootDirs": ["src"], // 移除冗余的**/*，避免解析范围混乱
    "moduleResolution": "bundler" // 适配现代打包工具，或用"node16"适配Node.js模块规则
  },
  "include": ["src/"]
}

步骤4：配置HTML脚本标签 #

引入编译后的JS文件时，必须声明为模块类型：

<script type="module" src="dist/你的入口文件.js"></script>

方案二：继续使用全局UMD脚本 #

如果坚持用CDN的UMD版本，解决TypeScript报错的步骤：

步骤1：安装Chart.js类型定义 #

npm install @types/chart.js --save-dev

步骤2：声明全局Chart变量 #

在src目录下创建globals.d.ts文件，添加全局变量声明：

// globals.d.ts
declare var Chart: typeof import('chart.js').Chart;

这样TypeScript就能识别全局的Chart构造函数，不再报类型未找到错误。

问题根源说明 #

1. @kurkle/color解析错误：浏览器原生ES模块无法直接识别npm包名，必须安装依赖并配置正确的模块解析规则（要么用打包工具，要么调整TS的moduleResolution）。
2. TypeScript找不到全局Chart：TS默认不识别全局环境变量，安装官方类型定义并声明全局变量后，即可获得类型校验和提示。

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