as const: the most underrated TypeScript feature 

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

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

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

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

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

Watched small video - huge power acquired. Thank you!

Finally something from youtube I will actually use

Awesome sharing!

4:05 me knowing new ts magic

Just wow. Thank you.

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

Amazing so concise and clean.

Videos are very useful and clear, thanks

I'm getting kinda imposter syndrome, please explain if we really use such tricky advanced concepts in coding, or is it okay if I'm using simple intermediate level code to get my stuff done, without engaging in fancy stuff like this. Btw, amazing video 🔥🔥!!

I prefer `as any` but to each their own

never knew this 😂😂😂😂 GOAT🎉🎉

'as const' is also nice cause it saves you from having to do Object.freeze over and over.

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

as const is poggersa

this i cool and all. but its actually just a workaround for an anti pattern., in the example case u give, why are u not using an enum type on routes, if fixed values are used ?

why don't use an Enum instead?

This looks like a very complicated way of implementing Enums in other languages 😂

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

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.

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

Almost as good as 'as any'!

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

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

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

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.

Great... now I have to clean my walls.... you HAD to blow my mind didn't you Matt? sigh... Feedback: at 5:20, you video recommendation thumbnail is covering the code you are still explaining, maybe make an outro?

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.

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)

The most underrated in TypeScript is *YOU* haha just kidding you can get tell you are respected by the way everyone else are referring to the wizard 🎉🎉🎉🎉

Pease add typescript playground link under your video. Thanks a lot!

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

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

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

Would an enum work the same?

“const x as const” just feels weird to write 😂

In this case, why not use enums?

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

... or just use enums ...

type Values = T[keyof T]; const routes = { home: '/', admin: '/admin', users: '/users' } as const; type Route = Values; // Route = "/" | "/admin" | "/users"

Hi Matt, I'm wondering if this prettify option could/should be better or not: export type ValueOf = Prettify; type Prettify = { [K in keyof T]: T[K]; } & {};

Thanks man, 3 months ago I started learning expo, and I wanted to make routes, I suffered so much because of that, I was obligated to type routes as any...and now I know how to fix it❤

const obj = { username: 'abc', password: 'dce', email: 'fgh', } as const; let a: (typeof obj)[keyof typeof obj]; // Value of an object let b: Exclude; // Exclude a value from an object let c: keyof typeof obj; // Keys of an object let d: Exclude; // Exclude a key from an object

is there a shorthand for this syntax (typeof variable)[keyof typeof variable]? just curious because it's this is going to be used a lot in the code base.

I don't get to just use typescript at work, but I sure as hell use jsdoc to the fullest in the meantime and love getting to do similar things with types. When you know for sure that you'll get auto completion and type errors, it's amazing how much less code you can end up writing. I recently set types up in such a way that I could safely turn 1000+ lines of manual references to properties on an object into just a few lines of code that auto updates, types and all.

God I hate typescript. If JavaScript wasn't so flawed typescript would be a 1000X simpler

Very useful! But what a terrible syntax 😮 Someone needs to revamp typed Javascript ASAP

Right at the end of this video, I got a suggested video "Don't use const!"

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 🤷

yeah and now pass this back into the library so the link maker function can be part of the library. And make it so the handlers and routes can be defined in one spot so we have a single source of truth. not possible, because it is a circle. I just want typescript for the autocomplete, but getting more extreme about it does not solve the issues I try to solve. maybe a custom vs code plugin / language server will do better than going deeper into this maze. There is value in typescript. But you have to know its limitations. otherwise you get stuck in a maze and forget that its original purpose was to make you more productive so you can deliver something for your users.

How about routes with matching variables like '/users/:id' that match /users/3 ?

Homie. Not the greatest example. Exactly the situation to utilize an enum. Flat key collection of string literals? Enum. No type gymnastics.

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

I guess your example is similiar to the usage of enum (?). are there any other example besides that?

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

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

you could also just not use typescript.....significantly easier

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

For the first example, why not just declare an enum of the route paths and pass the enum value?

I don’t understand the reason for all this. In such situations, you use enums which can also be used as expected interfaces within your function arguments.

Anybody knows that translation plugin for error messages ?

export type ValueOf = T[keyof T];

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

oh my god typescript is awful sometimes (usually anytime i have to do something new with types)

How can I type safe for api end point url for fetch ? Some of them will need query or other will need only body .

I get that this is how it works but specifying "const" twice just seems a bit weird to me. Why was it structured this way?

Always use as const instead of enums. Enums are wierd in ts.

And this is because, I am assuming from the pop-up, enums should not be used?

This video is pure gold, but const something as const; is still too ridiculous to read.

Just when I think I’m getting better with TypeScript…

I mean it's nice, but let's not pretend that Route type signature isn't horrific

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

Made me subscribe. Thank you very much. 👍

by the way, the audio improved A LOT.

Typescript ingorantee here, why is this prefered over enum?

In my opinion this is just an example of where enums should be used.

It is really ridiculous that we are used to something like const name = { ... } as const; If there was a new language that would propose something like this it would be laugh at till the end of times, and yet here we are, we all are using language like this. But aside from that you could do a helper type like this: type ValueOf = T[keyof T];

lol, “as const” is the most underrated feature, proceeds to show other features

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

What's the different between this and using Enums?

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.

As a C# developer, wtf

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

RU-vid's suggested video box is hiding the end of your video

The resaon for this is you forgot how to use escape characters....

Another trick is `as const` objects somewhat work with built-in methods while almost not losing all type info: ```typescript const ROUTES = { home: "/", admin: "/admin", users: "/users" } as const; // sadly not a tuple of literals, merely an array of literal type union const routeValues = Object.values(ROUTES).map((value) => value); export type IRoute = (typeof routeValues)[number]; export function validateRouteValue(inputValue: unknown): inputValue is IRoute { // have to coerse type there because typescript is iffy with `Array.includes()` // when it's array of string literals return routeValues.includes(inputValue as IRoute); } export function doSomethingFromValue(inputValue: IRoute): void { switch (inputValue) { case "/": case "/admin": case "/users": { break; } default: { throw new Error(`Invalid value "${inputValue satisfies never}"`) } } } ``` Achieves the same result but you also get a validation function which acts as a type predicate. The `doSomethingFromValue()` also shows how literal type unions can be paired with `satisfies` keyword to achieve exhaustive switch cases.

Theres gotta be a better than this “keyof typeof typeof keyof” shit

You can enum for routes and save yourself some time

Values are no Types. My head hurts 😮.

object as const is what Enums were supposed to be

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

2nd most underrated has to be discriminated unions

Instead of Enums I always do this way.

Why not just use a union of strings for this?

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

thank you, you are a life saver!