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

Question

我正在使用带有 TypeScript as pre-processor 和 JSDoc 的 vanilla JavaScript。
这几乎可以完美运行，尤其是在后端（例如在 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。相反，我想知道如何直接在函数注释中指定它，所以我不必按照建议的here 为每个出现的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 类 - 新的目标属性已经存在，因此它会被我们的新类型覆盖。

& 本身不是 jsdoc 运算符，而是来自 TypeScript 的运算符。所以这只有在你继续使用 TypeScript 作为你的预处理器时才有效。更详细的解释见this。