如何解决@observablehq/plot的TypeScript声明文件报错问题

方案1：优先安装官方类型声明包（首选） #

直接执行以下命令安装社区维护的类型包：

npm i --save-dev @types/observablehq__plot

安装完成后重启TypeScript服务（VSCode中可按快捷键Ctrl+Shift+P，选择「TypeScript: Restart TS Server」），绝大多数情况下报错会直接消失。

方案2：手动添加声明文件（官方类型包不存在时使用） #

如果执行上述命令提示找不到对应包，再按以下步骤操作：

步骤1：创建声明文件 #

在项目根目录（和tsconfig.json、next.config.js同级的目录）新建名为global.d.ts的文件，写入以下内容：

declare module '@observablehq/plot' {
  const Plot: any;
  export = Plot;
}

刚接触TypeScript的话先用any类型兜底即可，后续熟悉类型语法后可以自行补充对应方法的精准类型定义。

步骤2：确认tsconfig配置 #

打开项目的tsconfig.json文件，确认include数组包含声明文件路径，默认Next.js的配置会自动识别根目录的.d.ts文件，如果不生效可以手动补充路径：

{
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "global.d.ts"],
  // 其余原有配置保持不变
}

步骤3：重启服务 #

配置完成后重启IDE或者TypeScript服务，报错就会消失。

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