This saved me HOURS of refactoring time

Поділитися
Вставка
  • Опубліковано 19 чер 2022
  • Learning about the difference between optional properties (name?: string) and undefined unions (name: string | undefined) can give you an amazing productivity boost for certain refactors.
    Become a TypeScript Wizard with Matt's upcoming TypeScript Course:
    www.totaltypescript.com/
    Follow Matt on Twitter
    / mattpocockuk

КОМЕНТАРІ • 48

  • @grgry06
    @grgry06 2 роки тому +5

    Hi, I subscribed to your channel because I love your content! And I also liked your more straightforward approach of teaching advanced TypeScript. After almost 2 years of writing in TypeScript, I wanna learn more so yeah.

  • @sickhowl7951
    @sickhowl7951 2 роки тому +1

    Awesome content mate, keep it up!

  • @enfieldli9296
    @enfieldli9296 2 роки тому

    Sweet tip! So solid

  • @nimeshgurung6600
    @nimeshgurung6600 2 роки тому +2

    Gonna buy tickets to that Advanced Typescript show on the first day it releases. Learnt so much on these tiny trailers, can't wait for the whole damn movie. When is it being released?

  • @brokula1312
    @brokula1312 2 роки тому +21

    Wow, this never crossed my mind to be honest. Mostly because I thought these two "?" and "undefined" are the same thing.
    Today I found out there is a built in type called "PropertyKey" which is just a union of string, number and Symbol. In my code I was totally unaware or just completely forgot about the Symbol type, but with this I don't have to care any longer.
    Thank you Matt. I'm sharing your channel with my colleagues.

  • @user-fg6ng7ej6w
    @user-fg6ng7ej6w 2 роки тому

    cool series of tips

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

    Really nice trick I’m not as good as I want but if I have undefined I really have to deal with it or just add ? In my key so my code will not show error. Is that correct ? Sorry but just starting typescript but love how you explain things. Thanks

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

    Very Nice!!

  • @justintaddei
    @justintaddei 2 роки тому +3

    Hi Matt. Absolutely love these short videos! May I ask which extension you use for that awesome inline auto complete?

    •  2 роки тому +6

      This is probably GitHub Copilot.

    • @RTCDigitalS
      @RTCDigitalS 2 роки тому +1

      @ R.I.P

  • @MaNiarus
    @MaNiarus 2 роки тому

    Matt when you will release your TS Course? Can't wait :)

  • @r3d-soft
    @r3d-soft 11 місяців тому

    I like the behavior of “| undefined” to keep things explicit. Even if I end up passing undefined, the next caller needs to think about what value should be passed rather than being accidentally swallowed by “?”. Using this approach on react components gives a nice auto completion experience as well

    • @sq5321
      @sq5321 11 місяців тому

      i think "null" is made for explicitly saying it's not a value, undefined is the same but in an implicit way

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

    Interesting THANK!

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

    Maybe I don't understand but by saying that you'll change it later, is that not the same as being ok with adding technical debt?

  • @kevinrobertandrews
    @kevinrobertandrews 2 роки тому +1

    Cool tip! What's a use case for being explicit about making a property undefined?

    • @mattpocockuk
      @mattpocockuk  2 роки тому +3

      If, for instance, you need to ensure that the key always exists for Object.keys.

    • @kevinrobertandrews
      @kevinrobertandrews 2 роки тому

      @@mattpocockuk Ah, cool idea, thanks!!

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

      @@mattpocockuk why not use null?

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

      ​@@ShantanuAryan67 say for example you have an optional string parameter to a function. Its type would be string | undefined. That means you could assign it directly to a property of type string | undefined. If you made the property string | null, you'd get a type mismatch error.

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

    I temporarly remove the ?, check each error then return the ?

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

    Wizadry!

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

    Yeah true,, I really like the undefined rather than adding? to type defs.

  • @yuriygerasimovich4187
    @yuriygerasimovich4187 2 роки тому

    Just wow o_0

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

    Feels really weird to be passing `undefined` explicitly like that. At least in JS standards we usually say to avoid using `undefined` - use `null` if you must.

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

      Null makes more sense if your data is coming from an external source like a server or something. In this case the undefined type makes sense since it makes you pass in some value in every function. You could just pass null into the function and have the type be undefined though

    • @tuananhdo1870
      @tuananhdo1870 19 днів тому +1

      explicit is always good

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

    Thanks for the tip but why would anyone want to not have it be explicitly stated that role is undefined?

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

      In many cases you just don't care if it's optional or if it's explicitly undefined because your code surrounding it will be the same. But sometimes you don't even have that choice, if let's say an API has optional properties in the backend it'll not be sent explicitly undefined, it'll just be omitted. Rather than parse and map it to explicitly undefined a optional with the question mark makes more sense

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

      Another example is optional props in react. Imagine if setting a style required that all properties you do not want to set were required, it'd be a nightmare

  • @ColinRichardson
    @ColinRichardson 2 роки тому +1

    is this a re-upload?

    • @mattpocockuk
      @mattpocockuk  2 роки тому

      It's probably a cross-post from Twitter, like all of these are!

    • @ColinRichardson
      @ColinRichardson 2 роки тому +2

      @@mattpocockuk AHHH, okay.. I knew I had seen this before, but couldn't find it in the history..

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

    i would rather use null instead of undefined
    undefined should only be returned and never should be set by the user for anything

  • @MaPhongBa129
    @MaPhongBa129 2 роки тому

    Smart way haha

  • @altairbueno5637
    @altairbueno5637 2 роки тому

    If the language were any good, you wouldn’t need weird tricks to refactor things lol

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

    there is no advantage of it. intellisense already shows optional properties too and you can optional chain with ? operator. thats not even a tip

  • @dmytro-skh
    @dmytro-skh 9 місяців тому +2

    good example of why TS is bad, pure type gymnastics with no real value in this case

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

      Not at all. On the contrary it is a good example of TS aiding you to double check where you might need to make changes.

  • @PavelLitkinBorisovich
    @PavelLitkinBorisovich 2 роки тому +3

    Just do not understand how it happened, how everybody got so obsessed about typescript, that it became a must in enterprise? It is just nice linter, nothing more than that...

    • @thearcticmonkey
      @thearcticmonkey Рік тому +18

      It is not just nice linter. You can ship products and features with less bugs, easier to maintain, refactor...

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

      Lol

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

      lol

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

      😂😂😂