Как задокументировать функцию узла HTML в jsDoc?

Question

Мне нужно добавить функцию, прикрепленную к узлу таким образом:

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

Но я не знаю, как документировать эту функцию (а также предотвращать ошибки линта), я пробовал использовать @extend с @typedef, но там сказано, что он работает только с конструкторами.

jsdoc

0

distante 22 Окт 2018 в 16:51

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');
}

Без ошибок

1

Graham P Heath 24 Окт 2018 в 19:48

Answer 2

(Не уверен насчет вашего стека, просто отмечая мой 2C из недавних (2019-Q1) личных проблем с VSCode JSDoc.)

Теоретически кажется, что можно использовать простой @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-элементы с помощью настраиваемых свойств было & «Обозначение типа пересечения», о котором я узнал из этот комментарий либо с помощью вспомогательного типа:

/**
 * @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, добавленное к такому расширенному типу, кажется, полностью игнорируется (как и наше свойство в первой неудачной попытке, я до сих пор не знаю почему).

Я изо всех сил пытался добиться чего-то подобного - расширить HTMLElement с помощью некоторых хакерских пользовательских свойств в JavaScript в VSCode - и после исчерпывающих SO / github / docs, погруженных в это решение для обходного пути, вполне сработало для меня.

1

myf 11 Фев 2019 в 22:05

Как задокументировать функцию узла HTML в jsDoc?

2 ответа

Похожие вопросы

Новые вопросы

jsdoc