如何在纯JS文件中通过JSDoc获取Chart.js的VSCode智能提示？

问题根源 #

Chart.js的UMD全局变量Chart兼具**值（构造函数）和命名空间（包含所有类型定义）**的双重角色，你之前尝试的@typedef仅能引入类型，无法关联到全局环境中的构造函数值，因此出现类型与值不匹配的报错。

正确解决方案 #

方案1：绑定全局实例并关联类型 #

在app.js顶部添加以下代码，通过window.Chart获取全局构造函数，同时用typeof import('chart.js')关联完整的模块类型：

// @ts-check
/**
 * @type {typeof import('chart.js')}
 */
const Chart = window.Chart;

方案2：直接声明全局变量类型 #

若不想显式从window取值，可直接声明全局Chart变量的类型：

// @ts-check
/**
 * @global
 * @type {typeof import('chart.js')}
 */
var Chart;

关键说明 #

• 两种方案都能让VSCode识别Chart作为构造函数的合法性，同时加载Chart.js的完整类型定义（比如Chart.Configuration、Chart.ChartOptions等），提供完整的智能补全。
• 确保项目根目录存在package.json，且已通过npm install安装依赖，VSCode的TypeScript服务会自动从node_modules读取Chart.js的类型文件。

验证示例 #

编写以下代码测试智能提示：

const myChart = new Chart('chart-container', {
  type: 'bar', // 此处应自动补全所有支持的图表类型
  data: {
    labels: ['Jan', 'Feb'],
    datasets: [{ data: [10, 20] }]
  },
  options: {
    responsive: true // 此处应自动补全配置项
  }
});

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