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

Поделиться
HTML-код
  • Опубликовано: 11 сен 2024

Комментарии • 62

  • @codeSTACKr
    @codeSTACKr  Год назад

    🦸 Become A VS Code SuperHero Today: vsCodeHero.com
    🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: discord.gg/A9CnsVzzkZ

  • @ChrisAthanas
    @ChrisAthanas 10 месяцев назад +14

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

  • @noriller
    @noriller Год назад +12

    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
    @ahmad-murery Год назад +11

    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

    • @0xhenrique
      @0xhenrique 11 месяцев назад +2

      running it alongside typescript won't trigger the compilation anyway? I don't really know, that's basically what I want to know before start fully embracing JSDoc hahaha

    • @ahmad-murery
      @ahmad-murery 11 месяцев назад

      @@0xhenrique No it will not trigger compilation, it's just indexing your files contents so that it can perform type checking, I guess.

  • @blessdarah1256
    @blessdarah1256 Год назад +4

    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.

  • @sadboisibit
    @sadboisibit 8 месяцев назад +1

    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.

  • @siphillis
    @siphillis 4 месяца назад +1

    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.

  • @misn757
    @misn757 Год назад +2

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

  • @kushagra-aa
    @kushagra-aa Год назад +3

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

  • @Ctrl_Alt_Elite
    @Ctrl_Alt_Elite Год назад +2

    Yayyyy it's here 😁🎉

  • @ThecrackpotdadPlus
    @ThecrackpotdadPlus Год назад +1

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

  • @HimalayanSheep
    @HimalayanSheep 11 месяцев назад +1

    thanks man learned a lot in just 15 min

  • @onnofaber242
    @onnofaber242 2 месяца назад +1

    Good video, thanks

  • @matthiaskolley1048
    @matthiaskolley1048 Год назад +2

    What about the ///

  • @devmnnu5334
    @devmnnu5334 Год назад +2

    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[]

  • @GMUStudentDesign
    @GMUStudentDesign Год назад +1

    Brilliant! Thank you!

  • @trishantpahwa6554
    @trishantpahwa6554 Год назад

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

  • @mateusbraga1960
    @mateusbraga1960 9 месяцев назад +1

    Thank you for the video!

  • @MrBlaq
    @MrBlaq Год назад +1

    IMO PHP's approach to typing is the best.

  • @trishantpahwa6554
    @trishantpahwa6554 Год назад +1

    Thank you return type is a great idea sir.

  • @mansurhamidoff1853
    @mansurhamidoff1853 8 месяцев назад +1

    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? 😅

    • @codeSTACKr
      @codeSTACKr  8 месяцев назад

      Thank you! It’s my codeSTACKr theme. Link in video description 😁

    • @mansurhamidoff1853
      @mansurhamidoff1853 8 месяцев назад

      @@codeSTACKr thank you! I will definetly try it ❤️ Subscribed!

  • @codecrumbs
    @codecrumbs Год назад +1

    Another great video!

  • @matthiaskolley1048
    @matthiaskolley1048 Год назад +1

    He's done it!!!
    Like the video. Then watch it ;-D

  • @alexanderkomanov4151
    @alexanderkomanov4151 Год назад +1

    Thanks a lot!

  • @0xhenrique
    @0xhenrique 11 месяцев назад

    I have a question about using JSDoc alongside Typescript. Does TypeScript transpilation gets in the way in this case? I mean, JSDocs doesn't runs any kind of compilation or transpilation, what can make your app build faster, but using it alongside typescript will I still have the transpilation going on?
    I work on a large project, I spend almost 30 minutes a day just waiting for the system re-build after saving a file (I benchmarked that on a normal day at work). It's almost 3 hours a week just waiting for typechecking, that really pisses me off sometimes.
    I want to embrace JSDoc.

  • @keenoogodlike
    @keenoogodlike Год назад

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

  • @sennlich
    @sennlich 9 месяцев назад

    Thank You ! Top Top Top

  • @testeTestandomuitosTestes
    @testeTestandomuitosTestes 6 месяцев назад

    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 "

  • @nextwebai
    @nextwebai 10 месяцев назад

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

  • @wahoobeans
    @wahoobeans 8 месяцев назад

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

  • @DereckRocker
    @DereckRocker Год назад +1

    thx!

  • @hunterwoodall8222
    @hunterwoodall8222 8 месяцев назад

    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?

  • @mluevanos
    @mluevanos Год назад +1

    I use a combination of TS and JS Docs.

    • @codeSTACKr
      @codeSTACKr  Год назад

      Amazing! How do you like it?

  • @adevinwild
    @adevinwild Год назад

    Hey, thanks for that video!
    Is there a performance difference by using `d.ts` and importing them ?

    • @PieterWigboldus
      @PieterWigboldus 8 месяцев назад

      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.

  • @mattroark216
    @mattroark216 Год назад

    great music! where can I find it for my coding sessions? :)

    • @codeSTACKr
      @codeSTACKr  Год назад

      It's licensed music, I'm not sure if it's available anywhere else. It's called "Corporate Technology & Science Background" 😅

  • @vasukalluru24
    @vasukalluru24 Год назад +1

    What's your VS Code Color Theme?

  • @whisperhelper5829
    @whisperhelper5829 Год назад

    I see a lot of different js docs in the extension marketplace, How do I know correct version?

    • @codeSTACKr
      @codeSTACKr  Год назад +2

      I don't have any specific VS Code extension installed for JS Doc. It's natively supported.

  • @Nosleepguy
    @Nosleepguy Год назад

    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 }

    • @yt-sh
      @yt-sh 11 месяцев назад +1

      // 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 }

    • @Nosleepguy
      @Nosleepguy 11 месяцев назад +1

      thanks for sharing

  • @timfrank870
    @timfrank870 9 месяцев назад

    For libraries only!

  • @pawixu
    @pawixu 9 месяцев назад

    Great video, but that font 🙃

  • @The_Pariah
    @The_Pariah Год назад +11

    I can't take anyone seriously that uses "cursive font" in their text editor. Even comments.

    • @neneodonkor
      @neneodonkor Год назад +5

      Very unnecessary comment. If you can't then why bother watching?

    • @The_Pariah
      @The_Pariah Год назад

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

    • @nextwebai
      @nextwebai 10 месяцев назад +3

      😂😂😂 boy you have a lot to learn in life 🤦🏻‍♂️

    • @The_Pariah
      @The_Pariah 10 месяцев назад

      @@nextwebai Yes. Soooooo much to learn about cursive fonts in text editors...
      I'm older than you, kid.

    • @nextwebai
      @nextwebai 10 месяцев назад +4

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

  • @owlmostdead9492
    @owlmostdead9492 Месяц назад

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

  • @testeTestandomuitosTestes
    @testeTestandomuitosTestes 6 месяцев назад

    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