如何在 jsDoc 中记录 HTML 节点函数？

Question

我需要以这种方式添加附加到节点的函数：

myElement = querySelector('#myElement');
myElement.moveMe = () =>{
    //move Me Code;
}

但我不知道如何记录此函数（以及防止 lint 错误），我尝试将 @extends 与 @typedef 一起使用，但它说它只适用于构造函数。

Answer 1

我可能会建议正确的方法是自己用 {el: myElement, moveMe: ()=>{}} 创建一个对象，但如果您必须扩展，它看起来像这样：

/** 
 * @constructor
 * @extends {HTMLElement}
 */
const NewType = function() {};
/** @type {function()} */
NewType.prototype.moveMe = function(){};

/** @type {NewType} */
const myElement = /** @type {NewType} */ (document.querySelector('body div'));
myElement.moveMe = () =>{
    //move Me Code;
  console.log('dont remove me');
}

Error free

Answer 2

（不确定你的堆栈，只是注意到我最近（2019-Q1）个人的 2C VSCode JSDoc 挣扎。）

理论上，似乎应该可以使用带有"parent"类型声明的简单@typedef：（这不工作)

/**
 * @typedef {HTMLElement} movableElement
 * @property {function} moveMe
 */
/** @type movableElement */
var myElement = document.querySelector('#myElement');
myElement.moveMe; // NOPE, not present for some reason :(
myElement.tabIndex; // ok, this is from HTMLElement

最接近使用自定义属性扩展本机 HTML 元素的意图是 & "Intersection Type notation" 我从 this comment 那里了解到，要么使用辅助类型：

/**
 * @typedef movable
 * @property {function} moveMe
 */
/**
 * @typedef {HTMLElement & movable} movableElement
 */
/** @type movableElement */
var myElement = document.querySelector('#myElement');
myElement.moveMe; // ok
myElement.tabIndex; // ok (HTMLElement properties are present as well)

甚至没有辅助类型，直接交集：

/**
 * @typedef {HTMLElement & {moveMe: function}} movableElement
 */
/* ... */

奇怪的是，添加到此类扩展类型的任何 @property 声明似乎都被完全忽略了（就像我们在第一次失败尝试中的属性一样，我仍然不确定为什么）。

我一直在努力实现类似的东西 - 在 VSCode 中使用 JavaScript 中的一些 hacky 自定义属性扩展 HTMLElement - 在详尽的 SO / github 之后/ docs 深入了解这个解决方法对我来说非常有用。

如何在 jsDoc 中记录 HTML 节点函数？

How to document a HTML node function in jsDoc?

jsdoc