JSDoc：“EventTarget”类型上不存在属性“值”

Question

我使用香草 JavaScript 和TypeScript 作为预处理器结合JSDoc 。
这几乎可以完美运行，尤其是在后端（例如在 NodeJS 中使用时）。

但是，当我将它与 DOM 对象一起使用时，事情变得有点棘手。

例如：假设我有一个 HTML 输入字段，我捕获input事件并希望使用e.target.value访问输入值：

/**
 * Log data on input
 *
 * @param {Event} e
 */
let handleEvent = function(e){
    console.log(e.target.value);
};

document.getElementById("my-input").addEventListener("input", handleEvent);

这会导致 TS 警告：

“EventTarget”类型上不存在属性“值”

如此处所示：

现在我的问题是，正确的@param注释是什么？

到目前为止，我已经尝试过Event 、 InputEvent和HTMLInputElement 。

我不想使用Type-Assertion 。 相反，我想知道如何直接在函数注释中指定它，所以我不必按照这里的建议为e.target.value的每次出现单独设置@type 。

Answer 1

您可以像这样编写@param注释：

/**
 * Log data on input
 *
 * @param {Event & { target: HTMLInputElement }} e
 */
let handleEvent = function(e){
    console.log(e.target.value);
};

然后您将获得对正确类型的完全支持：

这样做的原因是，您基本上是通过新的目标属性“扩展” Event class - 它已经存在，因此它被我们的新类型覆盖。

与号本身不是 jsdoc 运算符，而是来自 TypeScript 的运算符。 所以这只有在你继续使用 TypeScript 作为你的预处理器时才有效。 有关更详细的说明，请参阅此内容。