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

Question

我在 TypeScript as pre-processor in combination with JSDoc 中使用香草 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 警告：

Property 'value' does not exist on type 'EventTarget'

如此处所示：

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

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

我不想使用 . Instead I'd like to know how to specify it in the functions annotations directly, so I do not have to set @type for each and every occurrence of e.target.value individually as suggested 。

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 作为你的预处理器时才有效。有关更详细的说明，请参阅 this。

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

JSDoc: Property 'value' does not exist on type 'EventTarget'

javascript

annotations

jsdoc

typescript