How to document destructured variable with jsdoc

Question

I have something like this:

let { total } = settings;

How do I document the total variable? I tried something like this:

/**
 * @type {Object}
 * @property {String} total.test
 */
let { total } = settings;

but it doesn't seem to be the right way.

Any suggestions?

Answer 1

@Tommy-Pepsi Gaudreau was so close in his comment on the original question.

Here's an example in the closure compiler tool @ closure-compiler.appspot.com

let /** @type {Object<string|boolean>} */ settings = {};
let str = 'string';
let bool = true;
settings.b = bool;
settings.s = str;

// Note that at this point, b and s are of the type {string|boolean}.

let {/** @type {string} */ s,/** @type {boolean} */ b } = settings;

console.log({b, s});

// But now, when we assign the wrong types, we get a warning.

b='warn';
s=false;

Number of warnings: 2

JSC_TYPE_MISMATCH: assignment
found   : string
required: boolean at line 15 character 4
    b='warn';
    ^
JSC_TYPE_MISMATCH: assignment
found   : boolean
required: string at line 16 character 4
    s=false;
    ^

Edit - Sep 27, 2018: I've reduced the amount of initial typing to ensure/clarify the types weren't being ignored, and that the warnings were coming from the types in the destructuring.

Answer 2

for any direct destructured variable you can try this workaround

/**
 * @typedef {object} DestructuredVariable
 * @property {string} total
 */
/** @type {DestructuredVariable} */
const {total} = getUser();

Answer 3

Simply inline JSDoc blocks within the destructuring block:

const {

  /**
   * The answer to everything
   * @type {number}
   */
  a,

  /**
   * The perfect food container
   * @type {string}
   */
  b,
  
  /**
   * Some other stuff
   * @type {object}
   * @property {string} foo Random text
   * @property {boolean} baz Random flag
   */
  c
} = {a: 42, b: 'burrito', c: { foo: 'bar', baz: true }};

Screencast of VS Code:

Documentation generated with yarn jsdoc file1.js

Answer 4

If you want to document an object the simple answer is:

/**
 * @type {{total: String}}
 */
let { total } = settings;

for further details just take a look at the JS-Documentation