如何在Vue3+TypeScript的VSCode扩展WebView中正确声明VSCode API类型？

正确的类型声明方案 #

不用any兜底，直接复用VSCode官方提供的类型定义即可：

• 第一步，确保已安装VSCode扩展开发的类型依赖（未安装则执行）：

npm install @types/vscode --save-dev

• 第二步，在全局类型声明中引用官方的WebviewApi类型：

declare global {
  interface Window {
    vscode?: vscode.WebviewApi<unknown>;
  }
}

进阶：自定义消息类型 #

如果你的WebView和扩展之间有特定的消息结构，可以替换<unknown>为自定义类型，让类型校验更精准：

// 定义你自己的消息结构
type WebViewMessage = {
  type: 'refreshContent' | 'syncConfig';
  payload?: { id: string; data: any };
};

declare global {
  interface Window {
    vscode?: vscode.WebviewApi<WebViewMessage>;
  }
}

补充说明 #

vscode.WebviewApi是VSCode官方内置的WebView端API类型，包含postMessage、getState、setState等方法的完整类型约束，用它替换any后，TypeScript就能自动校验API调用的参数和返回值，彻底解决类型报错问题。

内容的提问来源于stack exchange，提问作者肉蛋充肌