Step-by-Step Guide to JSDoc and TypeScript in Modern JavaScript Projects in 15 Minutes!

In this comprehensive guide, we dive deep into the world of JSDoc and TypeScript, two powerful tools for modern JavaScript development. We explore the history and functionality of JSDoc, a markup language used to annotate JavaScript code, and demonstrate how it can be used for type checking in your projects. We also compare JSDoc and TypeScript, highlighting the strengths of each and discussing when one might be preferred over the other.

This tutorial covers everything from setting up a new JavaScript project with TypeScript and JSDoc, to understanding and using important JSDoc tags supported by TypeScript. We also provide real-world examples, tips, and tricks to help you effectively use JSDoc in your own projects.

Whether you're a seasoned developer or just starting out, this guide offers valuable insights into the benefits of using JSDoc and TypeScript in your JavaScript development process. So, don't be afraid to experiment with these tools in your next project!

📚 Resources 📚
_____________________________________

🛠️ Tools I use:
_____________________________________

⏱️ Timestamps ⏱️
00:00 - Intro
00:41 - What is JSDoc?
03:44 - Setting Up Your JSDoc Project
04:42 - Understanding JSDoc
08:34 - Using JSDoc with TypeScript
09:43 - TypeScript Syntax
10:30 - TypeScript Declaration Files
11:55 - Leveraging GitHub Copilot for JSDoc Comments
13:37 - Give JSDoc a Try Today!
_____________________________________

💖 Show support!
_____________________________________

👀 Watch Next:
_____________________________________

🌐 Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #jsdoc #typescript

[ChrisAthanas]

I went down the TS rabbit hole and this approach is so much easier for medium scale projects

[noriller]

For libraries, they made a really good point in that you can just control click and go straight to the source code that you can just edit and see the changes in real time. This means someone can find a bug, control click, change and make it work and just copy paste the changes into a PR.

And of course, if you're somewhere you can't use TS (like me with a few legacy projects), then JSDoc will really help you.

[ahmad-murery]

Since I'm a vanilla js guy my best option is to stick to JSDoc, although I like type script but I hate to compile my code.
and nice tip regarding the dts file.
Thanks Jesse

[ThecrackpotdadPlus]

Champion! Well done there my dude. Thank you. 🎉

[trishantpahwa]

Descriptions for TypeScript variables is a great idea! Thank you sir. 😊

[sadboisibit]

I started with JS Docs in the early 20'ot teens and adopted TypeScript when v2.0 released back in 2016. With the recent release of CSS Nesting support in chromium browsers (Dec 7th 2023) I decided to try a no build setup on my newest project. Picking up JS Docs was like learning to ride a bike again as an adult. Sure the first few minutes are awkward and clumsy but within the first hour it felt like I had reconnected with an old forgotten friend.

[ConspiracyMeta]

thanks man learned a lot in just 15 min

[siphillis]

For newer projects (that aren't libraries), I'd still stick with TypeScript because it's just easier to write and read. But it's great that there's type-checking available for legacy projects, making it that much easier to find mistakes before runtime.

[blessdarah]

The fact is that, I love JsDoc a lot!!!! I use Ts because of the job but for, it's always jsDoc all the way.

[kushagra-aa]

I also use JSDoc with TypeScript, mostly for having a description for functions and arguments

[misn]

Hello! Yes, I would like a full tutorial on JSDoc!

[trishantpahwa]

Thank you return type is a great idea sir.

[nextwebai]

Is there another more easier than promoted autopilot to generate jsdoc based on function signature where you choose what type variables have?

[matthiaskolley]

instead of using typescript as dev dependency and a tsconfig?

[devmnnu]

how can we pass generic type in a function.
Ex. const [data] = React.useState(null)
give me: data of type null
wanted: data of type null / string[]

[testeTestandomuitosTestes]

Regarding my previous question, I know that you can even use something like querySelectAll to get around it, but I really wanted to understand if there is a way to do an "extends" like in typescrit because I tried and couldn't, "&&" didn't work, nor did "as "

[wahoobeans]

What’s the syntax for type checking a function/callback as an function argument?

[MrBlaq]

IMO PHP's approach to typing is the best.

[keenoogodlike]

It more comforable for making libraries because as many authors said they want to skip compilation step.

[hunterwoodall]

I am slowly beginning to utilize jsdoc inside a project, but I am wanting to use it for both type checking and to easily create documentation. My issue is, I have not been able to find a way to document the code while using the import statement

For example,
/** @type {import('./types').SomeType} */
will result in a parsing error when running jsdoc to create the documentation.

Do you know of any plugins or ways to get this to work?