【问题标题】：Adding JavaScript type hints for VSCode/Monaco Intellisence为 VSCode/Monaco Intellisense 添加 JavaScript 类型提示
【发布时间】：2017-02-03 07:11:24
【问题描述】：

有没有办法提示 VSCode/Monaco 的智能感知变量的类型。

我有一些这样的代码

var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");

我看到VSCode知道loc是URL

但它不知道gl是什么

它也不知道ctx是什么

这是有道理的，让函数根据其输入返回不同类型的情况有点不寻常。

但它确实有 WebGLRenderingContext 的类型数据

它知道CanvasRenderingContext2D

有没有办法让我告诉 vscode/monaco gl 是 WebGLRenderingContext 的一个实例，而 ctx 是 CanvasRenderingContext2D 的一个实例，而无需切换到打字稿？也许通过添加某种评论？

我需要在monaco 中工作的解决方案（至少在我的测试中显示所有相同的完成），因为这是针对 WebGL 教程站点，实际上不是针对 VSCode，但我希望解决方案是相同的。

【问题讨论】：

JSDoc 从 0.90 版开始在摩纳哥工作。见stackoverflow.com/a/45181853/2102158。

标签： javascript intellisense visual-studio-code monaco-editor

【解决方案1】：

更新：从 Monaco 0.9.0 开始，这些类型注释现在可以使用

看到JSDoc style type annotations 在 VSCode 中工作，尽管它们似乎在摩纳哥不工作。

var loc = window.location;

/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");    

/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");

【讨论】：

这种技术似乎不适用于导入的类型。例如，var Foo = require("foo"); /** @type {Foo} */ var foo; 在此示例中，Foo 是 VSCode 识别并具有完整智能感知的类型。相反，如果您这样做 var Foo = require("foo"); var foo = new Foo(); 一切正常。有什么专业提示可以让这个功能在导入的类型上正常工作吗？
@MicahZoltu 我在注释 Express 库中的类型时遇到了类似的问题。我找到了如何完成这项工作，并在这个问题上发布了一个额外的答案。 stackoverflow.com/a/48752318/1359579
重要提示：它仅在您使用/** */ cmets 时有效。 /* */ 和 // cmets 没有效果，烦人。

【解决方案2】：

正如 Micah 在对已接受答案的评论中指出的那样，外部模块仍然存在问题。如果库定义了一个全局对象，您可以从中引用类型，那么只需对模块执行一个 require 即可启用 jsdoc 类型注释。否则，您可以通过导入所有内容并将其映射到您自己的名称来模仿这一点。

import * as Foo from 'foo'

/** @type {Foo.Foo} */
var foo;

https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062

【讨论】：

它也适用于函数参数const foo = (/** @type {Foo.Bar} */bar) => {...};

【解决方案3】：

如果你愿意使用 Typescript，你可以这样做：

var gl : WebGLRenderingContext;

【讨论】：

谢谢！不幸的是，我在一个使用 JS 而不是 TS 的网站上使用它?
@gman typescript 与 javascript 非常相似。其中大部分与javascript非常相似，很容易转换
@kinger6621 不，这并不容易：一旦你在 TypeScript 中，一切都被“输入”了，你必须遵循它。