Почему не отображаются методы объектов событий JS в Visual Studio Code?

Question

[FogyX]

Имеется следующий тривиальный код на JavaScript:

const buttons = document.querySelectorAll('.ui_button');

buttons.forEach(element => { element.addEventListener('click', onButtonDown) });

function onButtonDown(event) {
    alert(event);
}

При нажатии на кнопку выводится всплывающее окошко с событием [object PointerEvent], то есть само событие обрабатывается прекрасно.
Однако, Visual Studio Code во время написания внутри функции onButtonDown строчки "event.prev" не видит и не предлагает никаких методов, связанных с событиями, включая event.preventDefault. В отношении остального кода на JS, однако, IntellySense работает нормально. Почему так происходит?

Answer 1

[Александр]

/**
 * @param {MouseEvent} event
 */
function onButtonDown(event) {
    alert(event);
}

Так случается потому, что неизвестно для чего Вы будете использовать функцию и вне addEventListener её контекст выполнения потерян, вот типизация и отсутствует.

Comments

[FogyX]

Получается, с помощью подобного комментария я могу конкретизировать параметры функции, как в статически типизированных языках, но при этом не провоцировать исключения при несовпадении типов во время выполнения?

[Александр]

FogyX, Да, можете. Это называется JSDoc. Но у него много меньше возможностей, чем у TypeScript.

[FogyX]

Александр, благодарю за помощь :>

[FogyX]

Александр, возник аналогичный вопрос, но с локальной переменной внутри той же функции.

/**
 * @param {Event} event
 */
function onButtonDown(event) {
    let el = event.currentTarget;
}

При попытке набрать, например, "el.style", не показывается всё то же окошко от IntellySense. В JSDoc я не смог найти чего-то подходящего для этой ситуации.

[Александр]

FogyX,

/** @type {HTMLElement} */
let el = event.currentTarget;

[FogyX]

Александр, всё, понял. Благодарю.