Search code examples
javascriptvisual-studio-codejsdoc

JavaScript JSDoc and Visual Studio Code: Document a function property properly


The TLDR version is: I want to document an external "class" in JavaScript using JSDoc where one of the properties is a function (method) with a named parameter and have it show up in Visual Studio Code in a readable fashion. I've tried 3 different ways and none of them do what I want.

The closest is this approach, and what I'm using at the moment:

/**
 * @typedef Zzz_BaseObject
 * @type {object}
 * @property {function(string):Zzz_Value} getValue Returns the Value held by this Node/Edge for the attribute with the given id.
 */

This shows up in VSCode like this: VSCode sample 1

Note that the parameter has no name (just arg0). If I specify a name: function(id:string) then it can't understand that property at all (in VSCode, i.e. mouse over does nothing).

I also tried:

/**
 * This is a predefinition of the method that is inside the Object
 * It will be used as the type at @property {Type} for the method
 * @typedef {Function} getValueFunction
 * @param {String} attributeID
 * @returns {Zzz_Value}
 */

and

 * @property {getValueFunction} getValue Returns the Value held by this Node/Edge for the attribute with the given id.

which results in just saying that the property is a Function (with no further information)

and I also tried:

/**
 * @typedef {(attributeId:string) => Zzz_Value} getValueFunction2
*/

which then says the type of the property is getValueFunction2.... but no further information.

Now, the gory details (skip, not really pertinent to the main question, just why obvious work arounds won't work).

Just to be clear, what I want is for VSCode to say on mouse over: (property) getValue: (attributeId: string) => Zzz_Value

  1. I can't use typescript, because the tool only understands javascript and has no integration system that allows me to use typescript and integrate it in. I wish I could as it would be a lot easier.
  2. I can't define actually classes and interfaces (using JSDoc) since the actual implementations are inside the tool, so I'm stuck with typedef to describe the "exported" types.

UPDATE:

So, I had previously tried the suggestion, and I tried again. When I change the code to:

No popup appears over the function (hard to see, but my mouse pointer is on top of the 'getValue' text):

VS Code Sample 2

And if I point at the object, it identifies the function, but thinks the function has no name (AND the parameter has no name):

VS Code Sample 3

I checked and I'm up to date on VS code.... but it's obviously some strange VS Code issue. I'm going to have one of my coworkers try it and see if it's just my machine.


Solution

  • You were nearly there. You have the correct type signature:

    (attributeId: string) => Zzz_Value
    

    So you should use this to declare the getValue property value of the Zzz_BaseObject:

    /**
     * @typedef {object} Zzz_BaseObject
     * @property {(attributeId: string) => Zzz_Value} getValue Returns the Value held by this Node/Edge for the attribute with the given id.
     */
    

    It should give you hovers like:

    Type object hover in VSCode

    Method hover in VSCode