visual-studio-code - VSCode IntelliSense 不会自动完成 JavaScript DOM 事件和方法

Question

我使用的是 Visual Studio Code 1.17.1 版。

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





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

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

Answer 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').

另一种选择是改变 typescript 类型:

创建文件 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。