What's the proper way to document callbacks with jsdoc?

Question

I've spent quite a while scouring the internet looking for the best way to properly document callbacks with jsdoc, but unfortunately, I haven't found a great one yet.

Here's my question:

I'm writing a Node.js library for developers. This library provides multiple classes, functions, and methods that developers will be working with.

In order to make my code clear and understandable, as well as to (hopefully) auto-generate some API documentation in the future, I've started using jsdoc in my code to self-document what's happening.

Let's say I define a function like the following:

function addStuff(x, y, callback) {
  callback(x+y);
});

Using jsdoc, I'm currently documenting this function as follows:

/**
  * Add two numbers together, then pass the results to a callback function.
  *
  * @function addStuff
  * @param {int} x - An integer.
  * @param {int} y - An integer.
  * @param {function} callback - A callback to run whose signature is (sum), where
  *  sum is an integer.
  */
function addStuff(x, y, callback) {
  callback(x+y);
});

I feel like the above solution is kinda hack-ish, since there's no way for me to specify in absolute terms what the callback function should accept.

Ideally, I'd like to do something like:

/**
  * Add two numbers together, then pass the results to a callback function.
  *
  * @function addStuff
  * @param {int} x - An integer.
  * @param {int} y - An integer.
  * @param {callback} callback - A callback to run.
  * @param {int} callback.sum - An integer.
  */
function addStuff(x, y, callback) {
  callback(x+y);
});

The above seems like it'd allow me to more simply convey what my callback needs to accept. Does that make sense?

I guess my question is simple: what's the best way to clearly document my callback functions with jsdoc?

Thank you for your time.

Solution 1

JSDoc 3 has a @callback tag for exactly this purpose. Here's a usage example:

/**
 * Callback for adding two numbers.
 *
 * @callback addStuffCallback
 * @param {int} sum - An integer.
 */

/**
 * Add two numbers together, then pass the results to a callback function.
 *
 * @param {int} x - An integer.
 * @param {int} y - An integer.
 * @param {addStuffCallback} callback - A callback to run.
 */
function addStuff(x, y, callback) {
  callback(x+y);
}

Solution 2

Another possibility is to describe the value passed to the callback this way:

/**
  * Add two numbers together, then pass the results to a callback          function.
  *
  * @function addStuff
  * @param {int} x - An integer.
  * @param {int} y - An integer.
  * @param {function(int)} callback - A callback to run whose signature is (sum), where
  *  sum is an integer.
  */
function addStuff(x, y, callback) {
    callback(x+y);
});

To document the return type of the callback, use @param {function(int):string}.

Solution 3

Workaround to make VSCode understand it

/**
 * @typedef {function(FpsInfo)} fpsCallback
 * @callback fpsCallback
 * @param {FpsInfo} fps Fps info object
 */

 /**
 * @typedef {Object} FpsInfo
 * @property {number} fps The calculated frames per second
 * @property {number} jitter The absolute difference since the last calculated fps
 * @property {number} elapsed Milliseconds ellapsed since the last computation
 * @property {number} frames Number of frames since the last computation
 * @property {number} trigger Next computation will happen at this amount of frames
 */

/**
 * FPS Meter - Returns a function that is used to compute the framerate without the overhead of updating the DOM every frame.
 * @param {fpsCallback} callback Callback fired every time the FPS is computed
 * @param {number} [refreshRate=1] Refresh rate which the fps is computed and the callback is fired (0 to compute every frame, not recommended)
 * @returns {function} Returns a function that should be called on every the loop tick
 * @author Victor B - www.vitim.us - github.com/victornpb/fpsMeter
 */
function createFpsMeter(callback, refreshRate = 1) {
    // ...
}

Solution 4

@param {function(number):void} myCallback

Works well in VS Code and WebStorm as of 2021

Solution 5

Possibly I'm arriving late to this answer...however this is my contribution. Using ES6 we can do this:

    /**
 *
 * @param {import('../clients')} clients  
 */
export default function socketServer(clients) {
io.on('connection', (webClient) => {


    webClient.on('register', (data) => {
      clients.add(data, webClient);
    });
}

 server.listen(8081, function (err) {
    if (err) throw err;
    console.log('listening on port 8081');
  });

)

In the folder 'clients' we have an index.js file with this code

let clients = new Map();

/**
 * Add Client to Collection
 * @param {string} key
 * @param {object} client
 */
export function add(key, client) {
  clients.set(key, client);
}
/**
 * Remove Client from Collection
 * @param {string} key
 */
export function remove(key) {
  clients.delete(key);
}

export const size = () => clients.size;

So, all functions that are being exported in file /clients/index.js are available as JsDOC and you can refer them via IntelliSense

View more solutions