The Problem 🤦‍♂️

For many of us JavaScript devs, we love the fact that TypeScript exists. It has type hinting, type checking, helps with intellisense and many more. As a JavaScript developer you can start using TypeScript right now. But there is a catch that you cannot use TS in your favourite project without re-writing it and making it compatible for TS. But what if you want these goddies without going through the struggle of re-writing your entire application?

The Solution 👨

We can utilise JsDoc with VSCode to get all these feature without going through the hassle. For those of you who are not familiar with JsDoc and VsCode, JsDoc is an API documentation generator for JavaScript and VSCode or Visual Studio Code is microsoft's lighter version of it's legendary IDE Visual Studio. VSCode has excellent support for many programming languages and if you do not like using products that are managed by Microsoft then you will be happy to realise that VSCode is open source but if you still do not want any customisation made by Microsoft then you can use Code OSS

Let's get started already 💁‍♂️

@param

@typedef

Now, lets write another example with custom data types. Here we'll work with moment JS

How do I create a custom type? 🤷‍♂️

Its easy, you just have to know a little bit of TypeScript. Let me show you the directory structure.. It looks like this

src
┣ controllers
┃ ┗ post.controller.js
┗ models
┃ ┣ post.model.d.ts
┃ ┗ post.model.js

Note: In the example of moment js we saw that type definations were provided in the library itself but in case if it is not then chances are you will find the type definations in the npm repository. For example you can install type definations for the bcrypt library on @types/bcrypt

Enforcing correct types 🙅‍♂️

In the moment JS example we passed 2 argument to getDiff function. How do we make sure that when executing this function we only pass 2 moment js object and not anything else. Well, there are 2 ways

@ts-check

@ts-check enables errors in your JavaScript files. In order to use it in a JavaScript file, you need to add it at the top of the file.

Notice how on line #17 VSCode is complaining that the type of the first argument passed is not correct.

VSCode Implicit Project Config ⚙

You can enable this globally as well in your JS project by toggling

"js/ts.implicitProjectConfig.checkJs": true

That is it, now you can utilise JSDoc and VSCode together for type hinting. Thanks for reading tutorial. We are hoping to update more tutorials like these very soon.

Tools used in this tutorial

1. Visual Studio Code (IDE)
2. JsDoc (API documentation generator)
3. Peek (Screen recorder)
4. VSCode theme - GitHub Dark Default

Part 2

Part 2 of this tutorial is updated here - How to use JsDoc annotations with VsCode for intellisense - PART 2 👨‍💻😎
In part 2 we discuss about @callback, @class, @constructor, @private and @public.

From author

Before you leave, I just want to thank you for reading this article 🖤. Me and my friend started working on our own blog thalava.com
Please visit our blog for more tutorials. We are excited to share more tutorials.
Thanks again, love from thalava.com 🖤