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.
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
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.
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.
Great video! Thank you very much. I learned almost everything I need to know about JSDoc. I know it sounds off topic but I am really curious about your VS code customisation: color theme, font and blinking cursor. It looks very beautiful... Could you please share it with me? 😅
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?
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 "
I import d.ts files in my JSDoc in JS files, and I don't feel performance issues. Also on runtime it is not imported, because types are documentation, only for your IDE and linting, not for runtime. And the IDE and linting doesn't feel slow. But most time I just create it in JSDoc with typedef, and import it in another JS file. But for my API I generate TS interfaces/types from the OpenAPI spec, so I can start with the OpenAPI, and then just generate the types so I have type hinting in my frontend and backend code.
when i code react component, i want to define type for spread input. How i can do that. example: const AnyComponent = ({ fool, bar, anyVariable , nextAnyVar }) => { return }
@@neneodonkor "Very unnecessary comment" Says who? You? Pretty sure you're not the comment police and you don't get to tell me what I can and can't say. Your comment was "very unnecessary".
“How to use JS doc” stop for a moment, reevaluate your life, ask yourself why you’re where you are and start using a real programming language. Life is too short for Javascripts bu11$hit.
But it is if you do a search in DOOM and use the following let slides = document.getElementsByClassName('slids'); it is an HTMLCollectionOf and you cannot use slides[0].style because it generates an error it cannot find the CSSStyleDeclaration, can you show how you would do this write the code here, seriously I really need to understand if there is any form
🦸 Become A VS Code SuperHero Today: vsCodeHero.com
🧑🏾🤝🧑🏽 Join my Discord developer community: discord.gg/A9CnsVzzkZ
I went down the TS rabbit hole and this approach is so much easier for medium scale projects
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.
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
@henriquemarques6196 No it will not trigger compilation, it's just indexing your files contents so that it can perform type checking, I guess.
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.
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.
I also use JSDoc with TypeScript, mostly for having a description for functions and arguments
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.
Hello! Yes, I would like a full tutorial on JSDoc!
Champion! Well done there my dude. Thank you. 🎉
thanks man learned a lot in just 15 min
What about the ///
Great video! Thank you very much. I learned almost everything I need to know about JSDoc. I know it sounds off topic but I am really curious about your VS code customisation: color theme, font and blinking cursor. It looks very beautiful... Could you please share it with me? 😅
Thank you! It’s my codeSTACKr theme. Link in video description 😁
@@codeSTACKr thank you! I will definetly try it ❤️ Subscribed!
Thank you for the video!
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[]
Good video, thanks
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?
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 "
What’s the syntax for type checking a function/callback as an function argument?
IMO PHP's approach to typing is the best.
He's done it!!!
Like the video. Then watch it ;-D
Brilliant! Thank you!
Is there another more easier than promoted autopilot to generate jsdoc based on function signature where you choose what type variables have?
Yayyyy it's here 😁🎉
Thanks a lot!
Hey, thanks for that video!
Is there a performance difference by using `d.ts` and importing them ?
I import d.ts files in my JSDoc in JS files, and I don't feel performance issues.
Also on runtime it is not imported, because types are documentation, only for your IDE and linting, not for runtime.
And the IDE and linting doesn't feel slow.
But most time I just create it in JSDoc with typedef, and import it in another JS file.
But for my API I generate TS interfaces/types from the OpenAPI spec, so I can start with the OpenAPI, and then just generate the types so I have type hinting in my frontend and backend code.
Thank You ! Top Top Top
Another great video!
Thanks!
It more comforable for making libraries because as many authors said they want to skip compilation step.
I see a lot of different js docs in the extension marketplace, How do I know correct version?
I don't have any specific VS Code extension installed for JS Doc. It's natively supported.
when i code react component, i want to define type for spread input. How i can do that. example:
const AnyComponent = ({ fool, bar, anyVariable , nextAnyVar }) => { return }
// method 1
const AnyComponent = (
{ fool, bar, anyVariable , nextAnyVar }:{ foo:string, bar:number, anyVariable :boolean, nextAnyVar:string }
) => { return }
// method 2 using interface or type
interface AnyComponent Props {
foo:string;
bar:number;
anyVariable :boolean;
nextAnyVar:string;
};
const AnyComponent = ( {fool, bar, anyVariable , nextAnyVar }:AnyComponentProps )=> { return }
thanks for sharing
thx!
great music! where can I find it for my coding sessions? :)
It's licensed music, I'm not sure if it's available anywhere else. It's called "Corporate Technology & Science Background" 😅
I use a combination of TS and JS Docs.
Amazing! How do you like it?
What's your VS Code Color Theme?
My theme - codeSTACKr 😅
@@codeSTACKr 🤩✌
For libraries only!
Great video, but that font 🙃
Kiehn Island
I can't take anyone seriously that uses "cursive font" in their text editor. Even comments.
Very unnecessary comment. If you can't then why bother watching?
@@neneodonkor "Very unnecessary comment" Says who? You?
Pretty sure you're not the comment police and you don't get to tell me what I can and can't say.
Your comment was "very unnecessary".
😂😂😂 boy you have a lot to learn in life 🤦🏻♂️
@@nextwebai Yes. Soooooo much to learn about cursive fonts in text editors...
I'm older than you, kid.
@@The_Pariah if you have like 3 adult kids and you’re a teacher with over 15 years of software development experience in the industry I believe you 😊
“How to use JS doc” stop for a moment, reevaluate your life, ask yourself why you’re where you are and start using a real programming language. Life is too short for Javascripts bu11$hit.
But it is if you do a search in DOOM and use the following
let slides = document.getElementsByClassName('slids');
it is an HTMLCollectionOf and you cannot use slides[0].style because it generates an error it cannot find the CSSStyleDeclaration, can you show how you would do this write the code here, seriously I really need to understand if there is any form