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?

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

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

┣ controllers
┃ ┗ post.controller.js
┗ models
┃ ┣ post.model.d.ts
┃ ┗ post.model.js
The controller method is utilising PostModel and PostDocument type definations and suggesting the properties that are available.
The interfaces defined in post.model.d.ts defines your types and helps with suggestions. This is very useful because in mongoose static methods and schema properties does not appear normally in suggesions. So from now on you can import any type in your project and utilise it's definations.

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

@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.

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

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 🖤

This pretty neat!
Not really a replacement for TypeScript but allows you to bootstrap some of its more strict type-checking into a legacy JavaScript project.

I'm definitely not turning away from TypeScript, but maybe this'll be good weekend project to add these JSDoc hints to my legacy repos.

Yes @seancassiere You are right.. I am a beginner in TypeScript and have lots of legacy projects to maintain. This is the way to go for me know :)
For new projects me and my friend are creating boilerplates in TypeScript using yarn workspaces

Hi readers, the 2nd part of this tutorial is updated here - thalava.com/how-to-use-jsdoc-annot... . Here I explain about @callback, @class , @constructor, @private and @public
Please read, share, provide feedback and let me know on which topics you guys would like me to post next 🖤

Building software (Software and DevOps Eng) 🏗️ Technical writer ✍️ About me: konadu.dev/about 🛠Built konadu.dev Talking about software engineering, devops AWS Certified

Built on Forem — the open source software that powers DEV and other inclusive communities.

Made with love and Ruby on Rails . DEV Community © 2016 - 2024.