TypeScript 中的 WebView 扩展 [英] WebView Extension in TypeScript

问题描述

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

In the code example (catcoding) the backing webview logic is written as an anonymous function in JavaScript however I would like to build this backing logic in Typescript.

我已经厌倦了将此逻辑作为带有 requireJS 的打字稿包重现，但我无法让它工作.

I have tired to reproduce this logic as a typescript package with requireJS but I can't get this to work.

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

…

}();

我希望在 TypeScript 中构建这个支持 WebView 的逻辑，以便我进行静态类型检查.

I expect to build this backing WebView logic within TypeScript so that I get the static typechecking.

推荐答案

如果您使用 TypeScript 编写 webview 脚本，则必须使用 typescript 编译器或 webpack 将它们编译为 JavaScript(请参阅 github 拉取请求扩展 示例).

If you write your webview scripts in TypeScript, you must compile them to JavaScript using the typescript compiler or webpack (see the github pull requests extension for an example).

VS Code 不包括可用于 webviews 内脚本的 VS Code api 的 TypeScript 类型，但是您在 TypeScript 中要做的就是声明一个名为 acquireVsCodeApi 的全局存在:

VS Code does not include TypeScript typings for the VS Code api available to scripts inside of webviews, but all you have to do in your TypeScript is declare that a global called acquireVsCodeApi exists:

declare var acquireVsCodeApi: any;

const vscode = acquireVsCodeApi();

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

这篇关于TypeScript 中的 WebView 扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！