Почему IntelliSense не распознает выбранный элемент запроса как элемент?

Question

Проблема

Я пытаюсь выяснить, почему IntelliSense VSCode не будет предлагать свойства объекта элемента, когда я получаю доступ к элементу HTML с помощью:

document.querySelector();

Всякий раз, когда я использую document.querySelector()метод, а затем с помощью оператора ., чтобы попытаться увидеть свойства моего выбранного элемента, я не получаю список свойств CSS, таких как style

Пример

У меня естьэлемент div в моем файле HTML с классом 'list'

<div class='list'>

И в моем файле .js я могу получить доступ к этому элементу, написав:

const listElement = document.querySelector('.list');

Моя проблемачто при использовании оператора . на listElement VSCode не показывает базовые свойства, такие как style. Я все еще могу установить вещи, набрав вручную что-то вроде

listElement.style.display = 'none';

, но когда я использую оператор ., VSCode не предлагает style и когда я печатаю стиль и снова использую оператор .это не предлагает display. Мой вопрос: Как я могу заставить Intellisense отображать эти свойства?

Примечание: я новичок в HTML, CSS и Javascript, поэтому не знаю, могу ли яЯ использую всю правильную терминологию, но я пытался!

Answer 1

VS Код JavaScript JavaScript IntelliSense не знает, как выглядит ваш HTML, поэтому он предположит, что querySelector возвращает очень общий тип объекта. Вот почему вы не видите предложений для .style и некоторых других общих свойств DOM. Эти свойства могут действительно не существовать для того, что querySelector возвращает!

Однако вы можете явно указать VS Code тип элемента, который querySelector возвращает, с помощью простой аннотации типа JSDoc :

/** @type {HTMLDivElement} */
const listElement =  document.querySelector('.list');

Это должно дать вам правильный IntelliSense: