Develop JavaScript apps 200x faster w/ @params and vscode.
Tags: javascript, webdev, tutorial, beginners
Published: 2022-11-09 10:00:14

Typescript has been voted 4th place as the most loved or dreaded language in the StackOverflow survey 2022, which is props actually to Microsoft, if there is one thing they have mastered is creating elegant and fun programming languages.

Besides being elegant, Typescript + the vscode IntelliSense equals Absolute 🔥🔥🔥.

<iframe src="https://giphy.com/embed/4bzr6bEtei3VOR89yk" width="384" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/absolutvodka-torch-absolut-absoluttorch-4bzr6bEtei3VOR89yk">via GIPHY</a></p>

one of the few reasons TS is so loved.

but what does all this have to do with JavaScript, @ params, and being 200x faster?

The absolute fire of TS && vscode IntelliSense, is absolutely the same fire we get w/ @ param + Javascript and vscode, done right you may fall in love with JavaScript even deeper.

example of the IntelliSense in action:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/931l7un2oa47r3ohwuc3.gif)

## @ Param
I think it's time I admit @ param is kinda clickbaity, it's part of a larger concept of JSdocs, @ params is well-known and recognizable I had to use it.

## JSDoc
defined as a quick start to documenting JavaScript.

besides documenting your code, JSDoc provides a way for vscode to understand your JavaScript, that's where the magic happens, the beautiful IntelliSense.

## @ type example
JSDoc has these @ annotations that describe your code, @param being one of them, @type defines the type of a variable. for example, annotating a string.

w/o JSDoc


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tul8dspzop888odnq18q.gif)

with JSDoc


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2unhuq41cuj5i0vdg42k.gif)

## Becoming 200x faster
### JSDoc and HTML elements

you can document any element and get free code completion.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vaju8wpyslsc9xgjpplo.PNG)

gif example: code completion


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpx6q7jev76j2ypeof1h.gif)

### JSDoc and Primitive types

```js

/**
 * @type {String}
 */

let str; 

/**
 * @type {Array}
 */

let arr;

/**
 * @type {Object}
 */

let obj; 

/**
 * @type {Number}
 */

let num;

/**
 * @type {Boolean}
 */

let bool;


```

### JSDoc and complex Arrays or Objects

more of the documenting side than code completion.

```js
/**
 * @type {Array<String>}
 */
let arr = []




/**
 * @type {{a: String, b: Number}}
 * 
 */
let obj;


```

### JSDoc and functions


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o87hy2zbtbbjsnpo66lr.gif)

You can go deeper or wide as you want, and get free code completion. JSDoc was designed for documentation, allowing developers to communicate the functionality of their JS code and their types, vscode just leveraged it for IntelliSense.

### IDE's

Thanks to @jfbrennan for pointing this out in the comments, which I totally missed, JSDoc is supported by almost all IDE's with some having it's own extended variation.

[app script example - extended variation](https://groups.google.com/g/google-apps-script-community/c/wRSf61fqIc0?pli=1) 

[wiki article on JSDOC](https://en.wikipedia.org/wiki/JSDoc)

## Outro

JSDoc is a neat trick to know, to learn more you can visit their site for in-depth documentation and more cool features.

enjoyed the article? and wondering if you can support me, which I will truly appreciate and goes a long way, you can buy me a coffee🥰.

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/mhlunguskF)

I also have a practical tutorial dropping soon, building a mobile app in React from scratch to production, with monetization, remote DB, auth, and all that good stuff [more info here](https://sk76.gumroad.com/l/ionic).

with that, have a good day or night🤟🏼. Thanks for reading!