Home > Enterprise >  How to document function custom types in JSDoc (or TypeScript?) and reference them so VSCode Intelli
How to document function custom types in JSDoc (or TypeScript?) and reference them so VSCode Intelli

Time:04-20

I am trying to document custom function types as part of an object, any help would be greatly appreciated:

Context of the problem

Here is a simple object declaration with some function properties (addCoordinate, addCoordinateOne, addCoordinateTwo) which we will go over as 3 exhibits, and why none of these work.

/**
 * @typedef {Object} Point
 * @property {number} x - The X Coordinate
 * @property {number} y - The Y Coordinate
 */

/**
 * @typedef {Object} Shape
 * @property {Point} startCoordinate - the starting coordinate
 * @property {Point[]} coordinates - An array of point coordinates
 * @property {(x:string, y:string) => void} addCoordinate - Updates the point
 * @property {addCoordinateOne} addCoordinateOne - Updates the point
 * @property {addCoordinateTwo} addCoordinateTwo - Updates the point
 */

/** @type {Shape} */
const square = {}

Exhibit A

@property {(x:string, y:string) => void} addCoordinate - Updates the point

This works fully, but isn't reusable like I need.

Exhibit A

Exhibit B

/**
 * @typedef {Function} addCoordinateOne
 * @param {string} X
 * @param {string} Y
 */

This sort of works, as it detects the custom function type. But it doesn't parse parameters properly. I made sure to follow the documentation for the @typedef tag: Exhibit B

Exhibit C

/**
 * @function addCoordinateTwo
 * @param {string} X
 * @param {string} Y
 */

This fails completely. Despite being the recommended approach by JSDoc's @function documentation. vs code hover showing expected Intellisense hint

If using the @callback syntax, descriptions are provided for each paramater: vs code hover showing Intellisense hint with param description

  • Related