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

Question

我正在使用带有TypeScript 的vanilla JavaScript作为预处理器与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”上不存在属性“value”

如这里所见：

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

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

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

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 作为你的预处理器时才有效。见这对于更详细的解释。