as const: the most underrated TypeScript feature

Поділитися
Вставка
  • Опубліковано 3 лип 2024
  • 'as const' is an amazingly useful TypeScript feature that most people still don't know about.
    00:00 SO underrated
    00:12 Objects are mutable!
    01:54 How as const works
    02:38 Object.freeze
    03:19 Deriving types from as const
    04:30 keyof typeof
    Become a TypeScript Wizard with my free beginners TypeScript Course:
    www.totaltypescript.com/tutor...
    Follow Matt on Twitter
    / mattpocockuk
    Join the Discord:
    mattpocock.com/discord
  • Наука та технологія

КОМЕНТАРІ • 313

  • @TechnologicNick
    @TechnologicNick 11 місяців тому +96

    You can also use `as const` on individual value literals or use it on template string literals to get all possible strings.

    • @ElektrykFlaaj
      @ElektrykFlaaj 11 місяців тому +9

      or on array to get a tuple. For instance typeof (["a", 1] as const) is readonly ["a", 1], while typeof ["a", 1] is (string | number)[]

    • @cool_scatter
      @cool_scatter 8 місяців тому +3

      The template literal trick is mind blowing!

  • @weirdwordcombo
    @weirdwordcombo 11 місяців тому +46

    Metadata based programming can be very very powerful. It essentially allows you to expand an application by just adding metadata to an object, while also writing less code overall. I have found that old codebasis often have similar and/or duplicate code all over the place, which can be refactored with this metadata based driven approach. Cuts down on TONS of boilerplate.

  • @apina2
    @apina2 11 місяців тому +46

    "const as const"
    sounds really smart and not ridiculous at all

    • @zuma206
      @zuma206 Місяць тому +5

      It makes perfect sense within the typescript syntax, and it's relationship with javascript syntax

  • @leotravel85
    @leotravel85 11 місяців тому +24

    You can also use 'satisfies' with 'as const' to constraint the object typings, like 'as const satisfies Record', its super neat

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

      Damn I needed this so many times and didn't know about it, thanks for sharing.

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

      holy crap I needed this, tysm

  • @goncaloflorencio6529
    @goncaloflorencio6529 11 місяців тому +16

    Thanks a lot for this longer explanation! I sometimes have a harder time catching up on the really short videos but here I was able to get everything immediately.

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

    Excellent video! You often make videos about bleeding edge TS features (that I can’t use yet) or incredibly complex topics (that make me scratch my head) but this video was super accessible and easy to follow! Here’s hoping you will make more mid-level TS concepts videos.

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

    I love your typescript content, thanks

  • @waterbreak
    @waterbreak 11 місяців тому +2

    After watching half of the video, I found an immediate use case in my TS project I'm working on. Great video!

  • @DulithMutucumarana
    @DulithMutucumarana 10 місяців тому +3

    Awesome! Thanks!
    works on arrays as well:
    const abc = ['a', 'b', 'c'] as const;
    type ABC = typeof abc[number];

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

    Thank you sir for this great explanation. I am glad that there are so passionate typescript writers out there like yourself. Just watching this video made me understand the keyof typeof stuff and as const much easier.

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

    That's absolutely brilliant! I wasn't super sure what "as const" was doing, thanks for clarifying that!

  • @ColinRichardson
    @ColinRichardson 11 місяців тому +80

    I use this quite often, I don't think it's underrated, I think other things may just be rated too highly... LOL

    • @ColinRichardson
      @ColinRichardson 11 місяців тому +4

      PS: Where is the Top hat and Monocle?

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

      ​@@ColinRichardsonPeople do wear two monocles to make a _spectacle_ for themselves, so now he's just missing the top hat, old chap 🎩

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

    Amazing! I needed this earlier today!

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

    The best and simplest explanation of "as const"!

  • @Gustavewpm
    @Gustavewpm 3 місяці тому

    Amazing video.
    Such really good pedagogy, loved it, even if I was already very familiar with as const and the other notions sumed up.

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

    This is such a helpful feature. I'll be using this all the time now, thank you

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

    Just came to say this video finally helped make `as const` click for me. Thanks for the info, Matt!

  • @naraksama3903
    @naraksama3903 11 місяців тому +2

    I love as const so much. It gives so much information of the code base you're trying to work with. It's makes localization strings global constants so much more useable.

    • @scylk
      @scylk 10 місяців тому +1

      Hey can you expand a little bit on that? Sounds interesting

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

      @@scylk It's very simple. You create an object that basically stores all of your strings and add an handler to dynamically change it based on the users OS language. When you mark those strings as const, TypeScript still sees the values of your default language and it's easier to know what string represents what text.

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

    Needed this a few months ago 😂 excellent content on this channel dude keep it up

  • @DC-xt1ry
    @DC-xt1ry 10 місяців тому

    Very nice ticks! keep them comming sensei!

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

    Videos are very useful and clear, thanks

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

    Really great.
    You are a great teacher 😊
    Thx from France.

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

    Thank you very much Mr Matt!

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

    i was in a live stream a few days ago on this,learned so much

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

    Amazing so concise and clean.

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

    Brilliant. Instant follow

  • @Leon-xg7zj
    @Leon-xg7zj 10 місяців тому

    Awesome sharing!

  • @yoni532s9M5w
    @yoni532s9M5w 10 місяців тому +1

    That's worthy of a medium article mate. Very nice solution to a very popular recurring problem

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

    Was using an enum for a radio group in Zod and discovered this. Never went through the trouble of understanding it, though. Thanks 👍🏿

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

    This channel is also underrated. awesome video! you just got a new subscriber here

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

    thank you, you are a life saver!

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

    Made me subscribe. Thank you very much. 👍

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

    Finally... now I understand it. Thank you Matt.

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

    Watched small video - huge power acquired. Thank you!

  • @ginger-viking
    @ginger-viking 10 місяців тому

    I did not know as const prevented the object being changed - thanks!

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

    Wow great video especially as a new typescript developer, I subscribed

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

    You guys are lucky I'm dumb, I asked the question that inspired this video :)
    Thanks for all you do Matt, I learned a whole lot.

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

    That was a whole lot of fantastic stuff that will immediately be used

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

    "Object.values on a type level" trick is pretty neat. Thanks!

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

    Simply a typescript magician

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

    That's brilliant!

  • @christopheradolphe
    @christopheradolphe 3 місяці тому

    Awesome tip here. Thank you @mattpocockuk for sharing this.

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

    Just wow. Thank you.

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

    Great video, typescript is beautiful

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

    this video is amazing!

  • @rizkyagungprasetyo8293
    @rizkyagungprasetyo8293 11 місяців тому +6

    Sometimes I utilize this tool to manage database names, collections, roles, etc., enabling me to infer values instead of strings :).

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

    You just saved me wtf. I was looking for a solution like this yesterday

  • @Hadi-gd7ul
    @Hadi-gd7ul 11 місяців тому

    This is so beautiful that i want to cry.

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

    Matt the goat!

  • @irfanfauzi8704
    @irfanfauzi8704 3 місяці тому

    It's ridiculous that I can't expect const as constant value. Love your vids

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

      You can, you just need to know what is constant about your value.

  • @williamlvea
    @williamlvea 11 місяців тому +3

    The biggest issue I've had with 'as const' is that it doesn't play well with libraries. Because of the readonly you'll get into cases where libraries are expected something like string[] and will require casting to mask the readonly.
    It also doesn't actually freeze the values, which can cause hard to debug bugs

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

    YOU are the most underrated UA-camr

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

    helpful video. thanks.

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

    Excellent....pretty cool. Thanks....

  • @zb2747
    @zb2747 10 місяців тому +1

    I love your videos. Very insightful, fun, and straight to the point

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

    Nice job 🎉

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

    Niiiiice ! I always forget how to target the type of keys and values of objects 😅

  • @user-hk6ns2eg1w
    @user-hk6ns2eg1w 6 місяців тому

    Nice!! thanks

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

    Nice video! Heads up on this format on mobile because there's no UA-cam outro, the "suggested video" card appeared whilst you were still coding and blocked the code in video

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

    Beautiful

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

    this is beautiful

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

    Fenomenal! 🎉

  • @olegsbk3562
    @olegsbk3562 11 місяців тому +2

    What do you prefer “as const” or enum in cases like in video?

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

    Nice. Theo made a similar video of why Enums are bad. He did something similar like this object as const, but his was a string array as const. And the type Route = typeof routeArray[number]. So the difference is whether or not you want a key name associated with the routes

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

    Finally something from youtube I will actually use

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

    Oh cool! I knew it for array to union, but not for object to union. Thanks!

  • @DoorThief
    @DoorThief 16 днів тому

    As someone who doesn't know TS and just knows C#, I recoiled slightly when I saw the keyof typeof [] bit
    But then I remembered reflection is pretty much like that anyways in C#, accessing public (or private) members and the like.

    • @anonymoususer520
      @anonymoususer520 10 днів тому

      The difference is that reflection happens at runtime. This "as const" typing happens statically at compile time, so it's typesafe -- unlike reflection.
      On the other hand, typescript types are not reified, whereas .net types are. So reflection over typescript types isn't possible, because the type information is erased during compilation.

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

    Merci !

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

    Nice quick dive into using "as const" with objects! I know it's a useful TypeScript feature when I find myself using it intuitively as I'm coding.

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

    never knew this 😂😂😂😂 GOAT🎉🎉

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

    this is awesome

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

    Would you consider making a video/talk about the 'declare' keyword. While lurking into various .d.ts files I can spot all possible combinations of 'declare class', 'declare abstract class' (also: 'abstract class' alone). I have only used declare in typescript playground to mimic the existence of a function to make my types go trhough, but I can't get my head wrapped around real-life usage and how it is different from interfaces. Thanks!

  • @sergey_llal6897
    @sergey_llal6897 9 місяців тому +2

    Can we use enum for store routes and avoid create additional types?

  • @mananabanana
    @mananabanana 11 місяців тому +7

    "as const or how to implement a real enum in typescript" 😂

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

    Mind blowing...

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

    4:05 me knowing new ts magic

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

    Now using rust and coming from c this is really funny to me how JS devs (i am a 4 years js/ts dev) go nuts with typing systems

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

    I now understand Rich Harris. We are packing up and moving to Jsdoc

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

    I may have agreed, but even better is the new const in generics feature.

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

    As const is really cool. Didn't know we could do that. Is there not an easier way to get values of an object as a union? Like we have keys of us there not values of

  • @yes.daniel
    @yes.daniel 11 місяців тому

    yes!

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

    Good to know thanks for sharing :) Like and new Sub

  • @moneyfr
    @moneyfr 11 місяців тому +3

    You didn't talk about: "as const satisfies Record "

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

      I started using a lot of "as const satisfies typeX", I'm creating a lib and it's helping me a lot

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

    Question : But when compiled, the 'as const' Object won't be frozen to JS i guess. So, if it's for heap memory optimization it is better to freeze the object a long side 'as const', isn't it ?

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

    UA-cam's suggested video box is hiding the end of your video

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

    Awesome explanation, thank you!
    Do you know if TS typesystem is Turing complete? Like the programming you can do at the type level like that? I bet it is.

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

    In deed you are a Wizard

  • @Alec.Vision
    @Alec.Vision 10 місяців тому

    The thing about 'as const', when not used on type parameters, is that it lies. The runtime object is, in fact, not readonly. You can get the same effect, with added runtime correctness, from Object.freeze. I consider this an extension of the 'One Source of Truth' ethos. 'as const' is, essentially, a type assertion.
    But I'm %100 guilty of using it everywhere so 🤷

  • @zuperxtreme
    @zuperxtreme 11 місяців тому +3

    Would an enum work the same?

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

      It would, but Matt has an irrational hatred for them, as seen in one of his videos "Why you shouldn't use Enums". Watch him abuse the concept of Enums and instead using magic variables. Biggest tool I've seen in TS.

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

    I first got interested in Typescript just because I thought I'd get type-checking... and weak typing was the 1990's biggest mistake. All of this auto-completion stuff in VSCode came along later as just a delightful extra little gift.

  • @omkarbhale442
    @omkarbhale442 11 місяців тому +5

    Why didnt you use enums for the routes? It looks like you only need one of the three routes at any moment. This particular example doesn't show use of as const i think. (I'm new to typescript so maybe I'm wrong, please correct me)

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

      Right, why prefer the code in the video in place of a string enum? String enums are made for this, and they generate faster and generally smaller JS output.
      const enum Routes {
      Home = "/",
      Admin = "/admin",
      Users = "/users",
      }

    • @programming5274
      @programming5274 11 місяців тому +2

      /* String enum */
      const enum Routes {
      Home = "/",
      Admin = "/admin",
      Users = "/users",
      }
      const goToRoute = (route: Routes) => {
      console.log(route);
      }
      goToRoute(Routes.Home);
      console.log("----------------------");
      /* as const */
      const rts = {
      home: "/",
      admin: "/admin",
      user: "/users",
      } as const;
      type Rte = (typeof rts)[keyof typeof rts];
      const goToRt = (route: Rte) => {
      console.log(route);
      }
      goToRt(rts.home);

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

      @@programming5274 Yes!

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

      Because Matt has a hate boner for them and prefers magic variables. Sharing a codebase with him can be only the first step of hell.

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

      @@programming5274 I totally agree yet I supose it is just to show that we have that option too. Imho u end with objects from other devs everytime so maybe u can just put 'as const' on them instead of refactoring to enums other people's job, idk

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

    So if you want as const but you don't want the whole tamale const you can define the internal object first as standard mutable object, and then put it inside in the outer const object.
    I.e. if you have
    const deep = {
    whatever: "/deep/whatever",
    };
    const routes = {
    admin: "/admin",
    home: "/",
    deep: deep,
    } as const;
    then routes will be inferred as of type:
    {
    readonly admin: "/admin";
    readonly home: "/";
    readonly deep: {
    whatever: string;
    };
    }

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

    Sick.

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

    Can’t wait for languages to treat everything as const by default

  • @prashantjoshi6703
    @prashantjoshi6703 11 місяців тому +2

    But what benefit it adds in comparison to string enums?🥺

    • @scylk
      @scylk 10 місяців тому +1

      Wondering the same lol

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

    4:05

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

    by the way, the audio improved A LOT.

  • @lorenzorev
    @lorenzorev 4 місяці тому

    Normally I would an enum in this case like "enum routes" and avoid declaring the type. What do you think?

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

    underrated

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

    Great video and example.
    Why not using enum for this case ?

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

      Check my video on enums

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

      @@mattpocockuk checked your vid about enums, so again - why dont just use enum for this case? cause enum with specified values transpiles to a simple obj as you had in your video