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

Question

我正在使用 Visual Studio 代码版本 1.17.1.

在 *.js 文件中，当我键入 document.querySelector("#elementId").style. 时，我没有针对样式（如边距、显示等）的 IntelliSense 提示。在 document.querySelector("#elementId").

之后甚至没有 onclick 事件提示

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

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

Answer 1

因为 querySelector 的结果是：

Element - 最一般的基础 class 或 null

如果您已经知道 ID，您可以使用 document.getElementById() - which returns instance of more specific class - 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 returns HTMLElement.

Answer 2

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

// 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)

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

VSCode IntelliSense does not autocomplete JavaScript DOM events and methods

visual-studio-code

intellisense

javascript-intellisense