如何记录在jsDoc一个HTML节点功能？

Question

我需要添加附以这种方式一个节点的功能：

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

但我不知道如何记录这个功能（并且还可以防止皮棉错误），我尝试使用@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）个人VSCode JSDoc斗争只是注意到我2C）。

从理论上讲，它似乎应该是可以使用简单的@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元素的意图是&“交集型符号”我了解到的，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的一些哈克自定义属性扩展HTML元素 - 和详尽的SO / github上/文档跳水后此解决方法十岁上下的解决方案非常适合我的工作。