typescript - TypeScript 中的 WebView 扩展

Question

在代码示例（catcoding）中，支持 webview 逻辑在 JavaScript 中编写为匿名函数，但是我想在 Typescript 中构建这个支持逻辑。

我已经厌倦了将此逻辑复制为带有 requireJS 的打字稿包，但我无法使其正常工作。

// This script will be run within the webview itself
// It cannot access the main VS Code APIs directly.
(function () {
  const vscode = acquireVsCodeApi();

…

}();

我希望在 TypeScript 中构建这个支持 WebView 逻辑，以便获得静态类型检查。

标签： typescriptvisual-studio-codevscode-extensions

Answer 1

如果您使用 TypeScript 编写 webview 脚本，则必须使用 typescript 编译器或 webpack 将它们编译为 JavaScript（有关示例，请参见github pull requests 扩展）。

VS Code 不包括可用于 web 视图内脚本的 VS Code api 的 TypeScript 类型，但您在 TypeScript 中要做的就是声明一个全局调用acquireVsCodeApi存在：

declare var acquireVsCodeApi: any;

const vscode = acquireVsCodeApi();

// Do stuff with api like getting the state
vscode.getState();