7 Awesome TypeScript Types You Should Know

Поділитися
Вставка
  • Опубліковано 14 січ 2025

КОМЕНТАРІ • 96

  • @sire_ns
    @sire_ns Рік тому +35

    I'll always appreciate these TS videos any day of the week

  • @DevoidFX
    @DevoidFX Рік тому +63

    The Prettify type should not exist. It should be a typescript configuration option.

    • @maxk5540
      @maxk5540 Рік тому

      it is good until you are really need to have an object

    • @xinaesthetic
      @xinaesthetic 8 місяців тому

      The semantics of what the higher level types are defined as is relevant information.

  • @kendanieleramiscal4923
    @kendanieleramiscal4923 Рік тому +35

    Another Typescript type, which is not included in the video, is the Pick type, which is the opposite of Omit. Instead of Omitting the property, you include the properties to be picked.

  • @timderks5960
    @timderks5960 Рік тому +15

    Man, there's a LOT of information in here I never even heard of, but is pretty much exactly what I need, super cool. This would be a great video to add chapters to btw:
    0:00 Intro
    0:18 typeof / keyof
    1:21 ReturnType / Awaited
    2:59 Prettify (and nesting)
    4:07 Partial / Required
    5:58 Omit / Exclude

  • @froxx93
    @froxx93 Рік тому +34

    The exclude util is not necessarily used for more complex types. It's for excluding types from union types in general instead of omitting props from an object type. So you could also use it to exclude e. g. string literals

  • @dominikrodler8010
    @dominikrodler8010 9 місяців тому +3

    One of the rare examples where a rather clickbaity sounding video really delivers 👍

  • @kesoBJJ
    @kesoBJJ Рік тому +23

    updateTodo example has a bug... you need to prefix fieldsToUpdate with ... if you want to override the todo, otherwise you will create an object with additional fieldsToUpdate property, which contains the values that should be used for updating.

  • @Nabulio85
    @Nabulio85 Рік тому +1

    Great explanations, very well illustrated. Thanks

  • @ravinrod
    @ravinrod Рік тому +2

    Wow! These are good TypeScript tips. Thank you!

  • @BeeBeeEight
    @BeeBeeEight Рік тому +31

    I'll never understand why interfaces hide their fields like it's something shameful lol. That Prettify type will save millions of developers including me.

    • @julian_handpan
      @julian_handpan Рік тому

      Bc it’s and interface 😂 not and object…

    • @mandokir
      @mandokir Рік тому +3

      Javascripters trying to understand object orientation.

    • @Netrole
      @Netrole Рік тому +1

      It used to be that way. But people complained that it is confusing and convoluted to see the result of the union when a union of preexisting types is made, instead they wanted to see which types the union is made of.

    • @vitvitvitvitvitvitvitvit
      @vitvitvitvitvitvitvitvit Рік тому

      ​@@Netrole what hellll. i think would be pretty usefull show the type and your fields.
      Like:
      title: string;
      description: string;
      role: Role <
      { name: string, i
      id: number }
      >

    • @tylim88
      @tylim88 Рік тому

      it is useful in creating branded type

  • @GambitVil
    @GambitVil Рік тому +1

    Really nice, short but with so many good and important things video.

  • @chrise.3114
    @chrise.3114 Рік тому +1

    Great stuff Josh! Please never stop posting new content!

  • @lakhveerchahal
    @lakhveerchahal Рік тому

    These are super cool tips. Thank you for sharing them

  • @shreyas0924
    @shreyas0924 Рік тому +1

    We need more videos like these!! Great video buddy

  • @Geuni620
    @Geuni620 2 місяці тому +1

    There's one thing I don't understand.
    Why do you put an empty object with Prettify's '&'?
    Wouldn't you get the same result without using the & operator...?
    I'm really curious! 😭

  • @aselivra
    @aselivra Рік тому +1

    Fantastic video, simple, well explained and to the point. Great examples 👍

  • @syedareebhussain8436
    @syedareebhussain8436 6 місяців тому

    Thanks Josh 🙌

  • @rahimco-su3sc
    @rahimco-su3sc Рік тому

    thanks a lot , we are constantly learning from your videos ! ,keep going

  • @harrycoveroriginal
    @harrycoveroriginal Рік тому

    So useful thank you!

  • @elliottchong
    @elliottchong Рік тому

    Super helpful! Thank you :)

  • @petarkolev6928
    @petarkolev6928 Рік тому

    Wow! Thanks, Josh 🍻🍻

  • @HG-wu6eb
    @HG-wu6eb Рік тому

    thank you
    let God bless you for your kind activity

  • @abdulgaffarabdulmalik4333
    @abdulgaffarabdulmalik4333 10 місяців тому

    Do you mean no matter how nested they are or no matter the number of Joins? Great video btw

  • @JacksonDiKey
    @JacksonDiKey Рік тому

    About Exlude is mind-blowing! Tnx

  • @vorkosiganhs
    @vorkosiganhs Рік тому

    Amazing tips!! Thx a lot!

  • @Leyksnal
    @Leyksnal Рік тому

    The best thing i have learnt today

  • @nidhish6966
    @nidhish6966 Рік тому

    This helped me a lot, Thanks !

  • @muradmesteliyev5651
    @muradmesteliyev5651 Рік тому

    I wonder will you have a video about a project with bun?

  • @DiogoScarmagnani
    @DiogoScarmagnani 2 місяці тому

    Prettify is very good, nice tip.

  • @solosdev6946
    @solosdev6946 9 місяців тому

    Thanks Josh helps alot for us :D

  • @arifulhaque3236
    @arifulhaque3236 Рік тому

    That's tips & tricks of Ts is time saving❤

  • @raymondmichael4987
    @raymondmichael4987 Рік тому

    Thanks buddy 😊

  • @maxwebstudio
    @maxwebstudio Рік тому

    Nice one ! Thanks !

  • @lanskaba3668
    @lanskaba3668 Рік тому +2

    Our brother always take us from darkness to light .
    Thank you Josh 🙏

  • @cookieman.19
    @cookieman.19 Рік тому

    This tutorial is valuable

  • @ahmedkhairydev
    @ahmedkhairydev Рік тому +2

    Great types, you just forgetting `Pick` 👀

  • @vaibhav5783
    @vaibhav5783 Рік тому +1

    This is more complex than learning rust or c or go. Anyway great video :)

  • @carlosricardoziegler2650
    @carlosricardoziegler2650 Рік тому +1

    Great content :) I ❤ typescript

  • @matthewbeardsley7004
    @matthewbeardsley7004 Рік тому

    Yep, nice!! Thanks heaps!

  • @latch909
    @latch909 Рік тому +1

    I’m a bit confused when writing a function in TS aren’t we meant to declare the return type in the function declaration? When would you need to infer the return type??

    • @DavidWMiller
      @DavidWMiller Рік тому +1

      This question is kind of backwards. Why would you want to define it? If you can infer it, the types are done. Your code defined them. Manually defining is redundant extra work.
      There are cases where you might not want to infer them, but those are the ones you'd need reasons for, which is the opposite of your question.

    • @danieljanjanocha7178
      @danieljanjanocha7178 Рік тому

      Let’s assume there is a function that returns an array of some kind of ingredients. In useState you want to declare that you want to keep array of some ingredients, but you start with an empty array. How to type the useState without knowing the return type of that function if you don’t wave the type specified elsewhere? It looks like an edge case but I can see a need for it sometimes

    • @gnack420
      @gnack420 Рік тому +1

      ​@@DavidWMiller no lol, declaring the return type is beneficial because a reader can see what the function returns without having to interpret the function.

    • @diegofernandocobacruz6508
      @diegofernandocobacruz6508 Рік тому

      ​@@gnack420Typescript shows you the inferred type when hovering the function name. No need for reading the code

    • @XxOsirisxX
      @XxOsirisxX Рік тому

      @@diegofernandocobacruz6508 The IDE does that, not TypeScript. Open it on a notepad and hover it over.

  • @Shuyinz
    @Shuyinz 6 місяців тому

    Very useful!

  • @kilo.ironblossom
    @kilo.ironblossom 8 місяців тому

    Prettify is now a vscode extension

  • @luccaparadeda1985
    @luccaparadeda1985 Рік тому

    Great video as always

  • @njihiamark6926
    @njihiamark6926 Рік тому

    great stuff Josh!

  • @ManvendraSK
    @ManvendraSK 5 місяців тому

    Exclude is not for complex types but unions.

  • @johnconnor9787
    @johnconnor9787 10 місяців тому

    3:45 Matt Pockock is a TS Ninja. He has a great channel. So as I understand he contributed to TS and created this type?

  • @Blast-Forward
    @Blast-Forward Рік тому +4

    5:46 Errr... and what will be the return type of updateTodo again? 😝
    Looks like somebody forgot another spread operator: ...fieldsToUpdate

  • @LabhamJain
    @LabhamJain Рік тому

    You should have added Pick as well since you showed omit

  • @jagdishpadeliya6050
    @jagdishpadeliya6050 Рік тому

    Very helpful 🔥

  • @HtetMyat79
    @HtetMyat79 Рік тому

    Very greate video thanks

  • @tobiasnickel3750
    @tobiasnickel3750 Рік тому

    I wonder IS prettify could make typescript faster. Maybe not self implemented but As A buildin type. Because of then could avoid looking up complex structures.

  • @meka4996
    @meka4996 Рік тому +1

    I think you can replace all "interface" with "type"

  • @elormtsx
    @elormtsx Рік тому

    awesome pretty helpful!

  • @arsenico-of3yn
    @arsenico-of3yn Рік тому

    Josh, would be great if you make a video about the skills a junior developer should have to get their first job. THANKS 4 all your content.

  • @alasassi5889
    @alasassi5889 Рік тому

    Do u think ai will replace us one day

  • @stasyanje4225
    @stasyanje4225 7 місяців тому

    Being mainly a Swift developer I'm left shocked by TypeScript versatility

  • @IqtidarHussain-i6m
    @IqtidarHussain-i6m Рік тому

    It is usefull to me thanks!

  • @realQuaz77
    @realQuaz77 Рік тому +2

    This is not good. We are adding production code to augment IDE assists. I get why it exists, but this is something that should be supported by TS and the tool chain by default.

    • @simotasca
      @simotasca Рік тому

      thats true
      one thing that can be done is "tsc --noEmit --incremental --watch" and that at least shows the errors in the console

  • @TheIpicon
    @TheIpicon Рік тому

    great video!

  • @badrakhariunchimeg1031
    @badrakhariunchimeg1031 5 місяців тому

    I won't you won't over

  • @shubhamrawat7895
    @shubhamrawat7895 Рік тому

    type Person = keyof typeof obj
    type Return = ReturnType
    Partial
    Required
    type Omitted = Omit

  •  Рік тому

    Master

  • @T25de
    @T25de Рік тому +1

    Fuck yea
    Nice one ☝️

  • @sammy709
    @sammy709 Рік тому +2

    The first example doesnt make a lot of sense. Why would you want Person to be either the string literal "name" or "age"

    • @IneyeGabriel
      @IneyeGabriel Рік тому

      It's just an example probably not the best one. But is super handy when you want to keep track of all keys within an Object or Enum

    • @sammy709
      @sammy709 Рік тому

      @@IneyeGabriel I know the feature is useful, but the example makes it more confusing

  • @aashiqahmed5273
    @aashiqahmed5273 Рік тому

    prettify is good one

  • @laturdaily5110
    @laturdaily5110 Рік тому +1

    ReturnType
    Awaited
    Partial
    Required
    Omit
    Exclude

  • @adriannuske
    @adriannuske Місяць тому

    Just so y'all know: These things are just to "cope" with "inherited" old code. If you have any respect for your job and your future, you definitely should learn some architectural skills. Cheers

  • @JakeAndDaddy
    @JakeAndDaddy Рік тому

    Good content, but you need to slow down with the delivery.
    I'm an expert at other languages but only just kept up with it.

  • @RayZde
    @RayZde Рік тому

    this is good to know, but you don't need any of this besides making things more complex and harder to debug.

  • @AlanMeile
    @AlanMeile 11 місяців тому +1

    & {} wtf

  • @DamirSecki
    @DamirSecki Рік тому +1

    can you please, pretty please, extremely please... not pronounce OUR as or and more like hour? (just phonetically like a-uaer, and not o-ur ... I don't know whay is this so annoying to me... but drives me nuts :)

  • @NatoBoram
    @NatoBoram Рік тому

    Aaaaand the prettify type was fake :/

  • @greendsnow
    @greendsnow Рік тому +8

    sorry but this is not a high quality content...

    • @allone258
      @allone258 Рік тому +14

      sorry but this is not a high quality comment

    • @juanps2721
      @juanps2721 Рік тому +3

      That Prettify type makes the video high quality

    • @danieljanjanocha7178
      @danieljanjanocha7178 Рік тому

      Like every developer finds a bug once in a while 😂