浏览器环境下如何在VS Code中为opencv.js启用智能提示？

1. 安装官方类型定义包 #

直接用npm安装OpenCV的TypeScript类型声明，这是最快解决提示问题的方式：

npm install @types/opencv --save-dev
# 若上述包不兼容，可尝试这个
npm install @types/opencv4nodejs --save-dev

安装完成后，VS Code会自动识别cv对象的全部类型，无论它是全局变量还是导入的变量。

2. 处理非ES模块的导入问题 #

opencv.js采用UMD导出规范，并非标准ES模块，直接import会导致类型识别混乱，提供两种解决思路：

方式一：使用全局脚本标签加载 #

先在HTML中加载opencv.js：

<script async src="path/opencv.js" onload="onOpenCVReady()"></script>

再在JS文件中声明全局cv的类型，即可获得智能提示：

// 声明全局cv的类型
declare var cv: typeof import('opencv');

async function onOpenCVReady() {
  // 若cv为Promise类型，先解析
  const cvInstance = await cv;
  // 此时cvInstance可正常触发智能提示
  const mat = new cvInstance.Mat();
}

方式二：导入时添加类型断言 #

如果必须使用import语法，可通过类型断言强制指定cv的类型：

import cv from './path/opencv.js';

// 断言cv为Promise类型，解析后得到完整OpenCV对象
const cvInstance = await (cv as Promise<typeof import('opencv')>);

// 输入cvInstance.即可看到所有方法和类的提示
const img = cvInstance.imread('image.jpg');

3. 手动编写类型声明文件（备选方案） #

若安装的类型定义不匹配，可在项目根目录创建opencv.d.ts文件：

declare module 'path/opencv.js' {
  import cvType from 'opencv';
  // 适配opencv.js可能返回Promise的情况，导出对应类型
  export default Promise<typeof cvType>;
}

创建后，VS Code会自动读取该声明文件，识别导入的cv为Promise类型，解析后即可正常触发智能提示。

4. 验证效果 #

完成上述步骤后，尝试输入cvInstance.，VS Code应会弹出OpenCV的各类方法与类的提示，比如imread、Mat、Canny等。

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