VSCode IntelliSense не выполняет автозаполнение событий и методов DOM JavaScript

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 это либо:

Элемент - самый общий базовый класс или null

Если вы уже знаете id, вы можете использовать document.getElementById () - который возвращает экземпляр более конкретного класса - HTMLElement - автозаполнение будет работать как положено.

document.getElementById('elementId').

Если вы не знаете id, но хотите автозаполнение, вы можете использовать аннотации типа JSDoc:

/** @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 - но я обнаружил, что это работает согласованно только тогда, когда вы делаете это именно так, как требует машинопись при работе с объединенными типами: вам нужно заключить приведенное выражение в скобки и поместить введите литой документ на той же строке. Фрагмент постоянной ссылки на вики:

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