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

Question

我使用的是Visual Studio Code 1.17.1。

在*.js文件中，当我输入document.querySelector("#elementId").style.时，我没有关于样式的智能感知提示（如边距，显示等）。 在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').

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

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

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。

Answer 2

另一个答案指向了正确的答案 - 使用jsdoc进行类型转换 - 但我发现只有当你在处理union类型时完全按照打字稿的要求执行它时，这只能保持一致：你需要包装表达式在括号中，将类型转换文档放在同一行。来自a permalink to the wiki的代码段：

user.friendly_id