JSDoc is in the comments of JS code, in a specific format to mark the type of variables, function parameters, return values, etc., so that you can avoid the error or less parameters when calling the function, improve the robustness of the code, reduce bugs; Coupled with editor support, can greatly improve the efficiency of coding.

For example, in the following example,



Because we’ve labeled itpdType when calledpdWhen this variable is used, it is very convenient for the editor to indicate what methods are available on the object.

We look at the official documentation of JSDoc and find that there are a lot of features listed, but in fact there are only a few commonly used features, just take a few minutes to master the following a few use methods, you can greatly improve the editing experience of writing code.

JSDoc syntax requires a comment that begins with /**, */.

The statementFunction argumentThe type of

@param {type of parameter} Comment on the name of the parameter

As shown in the figure, when we have defined a function, we input /** above the function and press Enter. The editor will automatically fill in the relevant variable name and other information for us. We just need to fill in the type of the parameter.

Once the type is written and used inside a function, the editor will prompt for the corresponding method and property.

When we call the function, the editor also parses what we wrote to JSDoc, prompting us for the type of arguments we need to pass in and a comment for the arguments.

Types In addition to String as shown in the figure, there are Boolean, undefined, and null types; And complex types, {key1:string,key2? : number}; Can also be combined with such as string | number such as typescript inside can use the type definition.

The statementThe return value of the functionThe type of

Use @returns to specify the parameter type and return value type of the function

@returns {string}

Such as:

/** ** @param {string} id @param {string} name @returns {string} */ function getName(id,) name) { //name. }

Effect of the call:

Declares the type of the variable

/**@type {string} */
var aaa=global.aaa

Effect:

Define a Type

Sometimes, when some types are complex and need to be used in many places, we can define a type that can be used elsewhere.

@typedef {type} Type name

For example, we define a type User with two properties, name and age

/**@typedef {{name:string,age:number}} User */

It can also be written this way:

/**
 * @typedef {Object} User
 * @property {string} name
 * @property {number} age
 */

To use in a function definition:

For use elsewhere:

Define a complex type for a function type:

/**@typedef {(a:string,b:string)=>void} FN */

Other examples, like marking a property of an object for examplegetIs a function, the type of the arguments in the function should be standard:

Or something like this: