TypeScript 中的 WebView 扩展

Question

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

\n\n

我厌倦了用 requireJS 将这个逻辑重现为打字稿包，但我无法让它工作。

\n\n

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

\n\n

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

\n

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();

Answer 2

我遇到了同样的问题。我当前的黑客涉及通过函数动态调用它

const vsCodeFunction = Function(`
  // forgive me for my sins
  if (typeof acquireVsCodeApi == 'function') {
    return acquireVsCodeApi();
  } else {
    return undefined;
  }
  `);
const vscode = vsCodeFunction();