VSCode IntelliSense 不会自动完成 JavaScript DOM 事件和方法答案

【问题标题】：VSCode IntelliSense does not autocomplete JavaScript DOM events and methodsVSCode IntelliSense 不会自动完成 JavaScript DOM 事件和方法
【发布时间】：2018-03-29 13:39:10
【问题描述】：

我使用的是 Visual Studio Code 1.17.1 版。

在*.js 文件中，当我输入document.querySelector("#elementId").style. 时，我没有关于样式（如边距、显示等）的IntelliSense 提示。在document.querySelector("#elementId"). 之后甚至没有onclick 事件提示

我不使用任何 npm 包。它只是一个简单的 html\css\js 项目。

如何开启正确的 IntelliSense 提示？谢谢。

【问题讨论】：

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

【解决方案1】：

因为querySelector 的结果是：

Element - 最通用的基类或null

如果您已经知道 id，您可以使用 document.getElementById() - 它返回更具体类的实例 - HTMLElement - 自动完成功能将按预期工作。

document.getElementById('elementId').

如果你不知道 id，但想要自动完成，你可以使用JSDoc type annotations:

/** @type {HTMLElement} */
var el =  document.querySelector(".myclass");

el.

// or without extra variable:
/** @type {HTMLElement} */
(document.querySelector(".myclass")).

我还没有真正测试过，但你可以尝试类似的方法：

/**
 * @type {function(string): HTMLElement}
 */
var querySelector = document.querySelector.bind(document);

querySelector('.myclass').

另一种选择是改变打字稿类型：

创建文件dom.d.ts
附加到它：

interface NodeSelector {
    querySelector<K extends keyof ElementTagNameMap>(selectors: K): ElementTagNameMap[K] | null;
    querySelector<E extends HTMLElement = HTMLElement>(selectors: string): E | null;
    querySelectorAll<K extends keyof ElementListTagNameMap>(selectors: K): ElementListTagNameMap[K];
    querySelectorAll<E extends HTMLElement = HTMLElement>(selectors: string): NodeListOf<E>;
}

现在 querySelector 返回 HTMLElement。

【讨论】：

谢谢！我可以设置 VS Code 在“querySelector”之前隐式添加这个 JSDoc 吗？我不想要额外的变量。像这样： /** @type {HTMLElement} */(document.querySelector(".className")).style.display = "none";
有趣的是，/** @type {HTMLElement} */ 仅适用于 id 上的 querySelector，而不适用于类。所以需要使用一些 HTMLElements 集合而不只是 {HTMLElement}？
是的，这行得通。其实，我不是很喜欢。强制 querySelector 返回 HTMLElement 比 Element 更好。但不幸的是，这是不可能的。不过谢谢。
我需要编译这个打字稿吗？只是将此 TS 添加到根文件夹没有帮助。现在我正在写香草 javascript。
不确定，我已经在文件夹中安装并配置了打字稿。在 js 文件顶部添加注释 // @ts-check 或重新加载编辑器有帮助吗？

【解决方案2】：

另一个答案指向正确的答案——使用 jsdoc 进行类型转换——但我发现只有当你在处理联合类型时完全按照打字稿想要的方式进行操作时，这才能始终如一地工作：你需要将转换后的表达式用括号括起来并将类型转换文档放在同一行。来自a permalink to the wiki的sn-p：

// We can "cast" types to other types using a JSDoc type assertion
// by adding an `@type` tag around any parenthesized expression.

/**
 * @type {number | string}
 */
var numberOrString = Math.random() < 0.5 ? "hello" : 100;
var typeAssertedNumber = /** @type {number} */ (numberOrString)

【讨论】：