Pro tip: type-check your JavaScript the easy way!

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

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

  • @MaxArt2501
    @MaxArt2501 5 лет назад +24

    JSDoc is actually still the only way to add a description to your functions and variables, even _TypeScript_ ones.
    You can actually use it _in place_ of TypeScript types in .ts files. You can't do all the type manipulations that TypeScript allows of course, but in many cases it's enough.
    I think JSDoc is the unsung hero of all this. Not many really use it correctly, and the official docs are IMO quite lackluster...

    • @aerotwist
      @aerotwist  5 лет назад +4

      Yeah it is the unsung hero because you can generate your docs from it, too.

  • @markgoho
    @markgoho 5 лет назад +12

    So informative! Thanks Paul. You're a fantastic educator. I'm so glad you're spending some of your free time to give back to the community like this. It really helps!

  • @GodOfMacro
    @GodOfMacro 5 лет назад +6

    The lowered the volume on the music worked perfectly for me, thanks for that !

    • @aerotwist
      @aerotwist  5 лет назад +2

      You were on my mind. Genuinely.

    • @GodOfMacro
      @GodOfMacro 5 лет назад +1

      @@aerotwist I feel special haha

  • @nicolasparada
    @nicolasparada 5 лет назад +9

    JavaScript type checking with VSCode is actually very nice.
    Here is another way a bet a lot of the people didn't know.
    You can define some custom types with jsdocs using @typedef then use it in other places. But you can also import these types from other files using a sort of dynamic-import like syntax, let say:
    /* @param {import("./otherfile.js").SomeType} param1
    For this to work, this "otherfile.js" needs to be a module. I do this thing where I create a types.js file with all my back-end data structures and a "export default undefined" at the bottom. This file is not going to be fetched from the network since it's only imported inside jsdocs.

    • @nicolasparada
      @nicolasparada 5 лет назад +2

      Here is an example github.com/nicolasparada/nakama/blob/441c91b0273293f981ac34bab73b07441d39dbc9/web/static/js/types.js

  • @SamiullahKhan
    @SamiullahKhan 5 лет назад +8

    I thought Paul gonna also mention that we can also just add type checking for just a specific file.
    Just add
    // @ts-check
    to the top of any javascript file
    Also tested with .vue file as well

    • @aerotwist
      @aerotwist  5 лет назад +6

      And // @ts-ignore :)
      I think at this point I mostly care about getting people started if they want to try it.

  • @YousefSh
    @YousefSh 4 года назад +1

    Finally. Typescript without compiling code. I hated debugging the compiled code. Mapping files were problematic too.

    • @robinparadise
      @robinparadise 2 года назад

      Totally agree. Useful in node scripts 👍

  • @PepsT
    @PepsT 3 года назад +1

    Wow, I thought this was going to be a pretty long video, but it was detailed and concise. Excellent!

    • @avi7278
      @avi7278 3 года назад

      Detailed? This is actually the least useful part of JSDoc type checking in typechecking function parameters. What does this function return? Imagine a function returns an object literal and then you want to use the value of a property of that object as the parameter of another function, but you want VS Code to suggest all the type safe values bound to that object for that function's current parameter? Showing that would have been detailed. This was surface level.

  • @grantglidewell6200
    @grantglidewell6200 5 лет назад +3

    How do you only have 7.7k(currently) subs with this polished, concise and useful content?

    • @aerotwist
      @aerotwist  5 лет назад

      Guess I suck at marketing?! 😂👍🙌

  • @ThirdWorldUSA
    @ThirdWorldUSA 4 года назад

    Thanks for sharing this. I prefer writing my scripts the way you described. The script is automatically documented and free of typescript noise while benefiting fully from vscode intellisense and type checking. There is no extra parsing required to interpret the code for both machines and humans. There is no extra build step to deploy the code - simply minify away the comments . Typescript and JSDoc maintainers agreeing to collaborate has been invaluable. Much kudos to them.

  • @everythingisfine9988
    @everythingisfine9988 3 года назад +1

    Soooo.... typescript as a devDependency & add some JSDocs and bam! Type checked JS 🥰

  • @erwinheitzman9854
    @erwinheitzman9854 5 лет назад +1

    Awesome comeback to the video from yesterday which I really enjoyed. Also your outro with the clap on the beat of the song was really awesome. Watched it twice haha, keep it up!

  • @browsermage
    @browsermage 4 года назад +1

    Paul this is amazing

  • @davidmaxwaterman
    @davidmaxwaterman 2 года назад

    Is this not possible with jsdoc alone, from the command line (ie without vscode)?

  • @ToukiMS
    @ToukiMS 5 лет назад

    Tank for the (detailled) tips Paul :) !

  • @accionrebeldemusical5762
    @accionrebeldemusical5762 5 лет назад

    Thanks, Paul, this helped a lot! ^____^

  • @theoligarchist1503
    @theoligarchist1503 3 года назад

    Didnt Flow make TS Obsolete in 2016 ?

  • @avilde
    @avilde 5 лет назад +2

    Nice tip, Paul ).
    A bit of off-topic question - Web Assembly (WASM). Will it take over Javascript someday? For example, .NET Blazor concept.

  • @maddada
    @maddada 5 лет назад

    That's helpful, however I was wondering if there was a way to set a type on variables and function parameters in the source files (like in your main.js file for example)

    • @aerotwist
      @aerotwist  5 лет назад

      Have a check in the docs, but I expect so

  • @codewithyazeed8177
    @codewithyazeed8177 5 лет назад

    Hi Paul, thank you! Have you tried Elm? Would love to hear your thoughts and see your fiddling with it!

    • @aerotwist
      @aerotwist  5 лет назад

      Never tried it! I should at some point, I guess.

  • @MatanKushner
    @MatanKushner 5 лет назад

    Here's a small and easy tool to add static analysis to JavaScript projects as an alternative to using TS with flags: github.com/matchai/ts-quick

  • @joreogan
    @joreogan 5 лет назад

    How can you code on this ABYSMAL keyboard

    • @aerotwist
      @aerotwist  5 лет назад

      Which abysmal keyboard?

  • @suxo
    @suxo 5 лет назад

    Good growth Mr Lewis #OperationBeard

    • @aerotwist
      @aerotwist  5 лет назад

      Working on it! 😁👍🙌

  • @DenisTRUFFAUT
    @DenisTRUFFAUT 5 лет назад

    background-color : france

    • @aerotwist
      @aerotwist  5 лет назад +1

      Orange and blue? Nawwwww

  • @superchillh3o
    @superchillh3o 5 лет назад

    these intro's are really why I'm here.

    • @aerotwist
      @aerotwist  5 лет назад +1

      Done after 10 seconds max

    • @superchillh3o
      @superchillh3o 5 лет назад

      @@aerotwist sorry, I didn't mean to sound negative, I really enjoy them and think they're hilarious, not a complaint, pardon the sarcasm.

  • @philipmrch8326
    @philipmrch8326 5 лет назад

    Just use TypeScript