This is my first article on getting started

preface

If you don’t know JsDoc by name, you’ll probably see some code and say, I’ve used it before! Here’s some of the most common code:

/** * Self introduction *@param {String} The name name *@param {Number} The age age * /
function introduce (name, age) {
    console.log('Hello, my name is${name}This year, I${age}At the age of `)}Copy the code

Many people think that this is all JsDoc, but this is just the tip of the iceberg. There are many things in JsDoc, but according to principle 28, we can only use 20% of JsDoc. Here are some useful things I understand about JsDoc

Automatic completion

If you specify @param {String} name, you can use the indexOf method in the body of the function. If you specify @param {String} name, you can use the indexOf method in the body of the function. So you can automatically prompt the string method. This prevents us from playing blind and making a mistake, and then spending some time looking up the mistake.

Type checking

First the code:

// @ts-check

/** * add *@param {Number} Num number * /
function increase (num) {
  return num + 1
}

increase('test')
Copy the code

In vscode, errors are reported in advance before execution. That’s because we’re adding in front of the function// @ts-checkSo vscode will check to see if the parameters passed are of the same type as we want. It’s starting to look a bit like typescript. It’s just that our type is in the comment. It feels like it’s empowering the javascript we normally write. Then we’ll write something more typescript-like.

Custom type

/** * @typepedef {Object<string, Any >} Person * @property {string} name - name * @property {number} [age] - age */ /** * @type {Person} Person */ const person = { name: 'Nancy', age: 18 }Copy the code

Use @typedef to define a type Person, and then use @type to use the type. Here we’re describing the type Person as an object whose key is string and whose value is any, and if we change any to number, the editor will give us an error because the name in the object does not match the type defined.

The enumeration

/**
 * @typedef { 'bob' | 'nancy' | 'james' } nameEnum
 */

/**
 * @type { nameEnum } name
 */
const name = 'james'
Copy the code

A way of writing something like an enumeration, also used first@typedefThis is used to define a type, except that the type is a fixed number of pre-written values, which are used before the required variables@typeAs you can see in the screenshot, the editor will make a selection of the values we defined. It’s also a great way to avoid small errors where we write wrong state values and things like that, and it’s not easy to find.

The import type

Do we always have trouble remembering words when writing webPack configurations? For example, is it rule, rules, Module or modules? If you forget, we’ll have to look at the Webpack website. In that case, it takes a lot of time. This scenario can also be solved with JsDoc.

other

Other examples include a header describing the file and an author’s comment

/ * * * * @ @ the file file configuration module config/config * @ author jameskid007 < https://github.com/jameskid007/nuxt-ssr-demo > * /Copy the code

In addition, there are many useful jsDoc, I will start here, you can find the jsDoc document to see the ~ jsDoc document

conclusion

Ok, JsDoc I think some good points, I have simply to describe, but also to make a record for myself. This is my first article. Although I wrote very little, I spent a lot of time typing. But the whole process was quite enjoyable. I hope I can write more things and record my own learning!