TypeScript Fundamentals × Satisfies and as const

these things that aren't changing. Right? You have an object that has here's Here's

times specifically when I would, give this a type. It's like, oh, it's it's like, it's a grouping of records or whatever, right, with string values. And And that tells me very little about what's actually in this object or what this this data actually is. It's like Yeah. Yeah. It satisfies the TypeScript compiler, but it's not describing

and everything is based off of just 1 single value. It's really nice to it. Have it all done for that rather than having to type it 6 or 7 times. And then it often can feel like a trap in TypeScript where you're writing in my code base where I list all of my courses, which course code it is. Right? WTF is what the flexbox.

Honestly, something that was added recently very recently to TypeScript, actually. And when I first saw this, you know, I I don't wanna speak for members of the audience, but When I first saw this, I I I looked at their examples and their docs, and some things like this can often feel, to me, like, Make the type to follow that directly. I think that seems pretty powerful. And and like we mentioned off the top, this isn't gonna be something I'm gonna be reaching for all the time, But there are

Another another quick example I have is I'm converting my and then the value of that object is US dollars, Canadian dollars, euro. You know? Like, And that's a handy object to have because you often need to be able to reference the label of a currency by its currency code.

if I have to when I launch a new course, if I have to go into 6 or 7 files and update it. So what I'm doing is I have somewhere So what you do, you say, okay. I have this type.

or it from the actual data that has been put into an object. And a lot of times in TypeScript, it makes sense to don't make the type

loop over and that will create a type based off of the data overwrite that. You might be saying, well, like, Wes, why do we need that? We have s Object dot freeze in JavaScript already. Right? Like, can't we just go ahead and use that? Mhmm. But

type make a type that's every single currency code As well as have an object by. Now I have 2 spots in my application where I have currency codes,

essentially these a static objects of data, whether that's like,

things that you are already writing. Right? And this is just another tool against that, or drop a review if you like this show.

All right. Here's an example podcast. Paste it in. Pop as const on the end. It will narrow it down and allow you to generate a type based off of the actual data, which is is kind of nice even sometimes.

In that object, Yeah. Nice. So let's Get on into it. We're gonna cover 2 things that are but I want you to know That's awesome. I, our our car head unit runs on Android as well, and I was And I was creating all the types for,

Sometimes it it's just handy just to do it real quick. Copy paste the type, and then stick it in your your typedefs file or wherever it is you actually need it. Yeah. Yeah. Hey. That that's fine. And you know what? Like, I mean, I was thinking at first, like, when would I use this? But there's a lot of times where you do have,

like, a customer purchase.

The other spot where I find this really helpful, you said currencies.

my application URL or or like, you have the example in here. It's like currency codes or something like that. Right? Yeah. These these structures of data where the data itself is kinda always going to be not only just the same, but it is it is what it is. And by being able to I want the digital bat. I want the little picture

the the data correctly.

the data and all the types will automatically ripple through my entire application. I'll be able to use them,

Current, JavaScript object that lives somewhere else. So I import the JavaScript object,

all of the course code types based off of the actual,

I'm I'm adding courses all the time, and it would suck

Like, I need a list of all the currency codes that are in our application.

infer an actual type from

You get the point. Right? And I was like, well,

In my JavaScript objects,

and then you can create a union of all of the, I like that. Let's talk about let's talk about the problem that we have with, All of the, frozen per se, like your third party library or something like that where someone isn't using TypeScript, then you should still use object dot freeze for that thing. Cool. Well, those are some neat TypeScript things like that where and that's kind of annoying, right, because you're maintaining it. So in in my case, I could just you can type. You have your currency object. You put as const on the end that will make a read only object.

It's sometimes easier to do it the other way around. Just get the data.

keys in it with this type of key of trick. And then all of a sudden I have the ability. And now if I go add a new course Christmas? JavaScript object data or from an array or literally anything. This will work with anything. Yeah.

The the type feels like you are duplicating okay. And then I I go on to Twitter, and everybody's like, oh, finally satisfies.

it's lost that compile time. It's stripped.

And don't forget to subscribe in your podcast player

overlooked by both us or other educational resources or whatever it. Because I think it's really helpful to dive into some of these things. TypeScript is one of those,

And do an episode on,

I think everybody's gonna be, using TypeScript more and more and more as we've just seen over the past year, 2 years, 3 years. So, it. You know, we're here, and let's, let's talk TypeScript this year. Wicked. Alright. Thanks, everybody, for tuning in. Catch you later. Peace.

like, freezing an object with as cons, making it read only. Yeah. As all TypeScript,

various aspects of TypeScript that are going

That overwrites objects in it.

CS.

man, I have an issue with TypeScript. There's some stuff going on in my code, and I don't know how to fix this or I don't understand this. Maybe hit us up on Twitter, and maybe we can reach out

Head on over to syntax.fm

tools that can really be

for a full archive of all of our shows, as const is there to save your bacon. And if you,

So there is nothing to stop that object from being overwritten in the browser. But the compiler will complain. The compiler you shouldn't be able to write any code

techniques.

If you're out there and you're wondering, like, maybe perhaps environment settings,

But if for some reason,

I I I don't wanna just say handy. It can be really life saving in many regards when you're working in your code base, but there are so many aspects of it That can you could get get into situations where you the compiler's not doing you any favors or it's just causing you a lot of pain and frustration. So Mhmm. We're here it for you in that regard. In 2023,

where the keys and values are unknown.

be interested in satisfies? What what does satisfies do? How does it satisfy you? CSD. Welcome to I got, you know, I got this hat that I'm wearing that's a Michigan, you know, University of Michigan hockey hat that I'm wearing right now.

Okay.

right now in TypeScript. And And on quite honestly, this is more of like a maybe this was missed when TypeScript was created or it was a like a bug that it never worked.

Like, I look at the docs, and I I read it. I say,

data And we'll talk about what specific use case you might want to use that, it doesn't know

the actual object, I talked earlier about the, So

which is was called satisfies.

or just because it works doesn't necessarily mean it's type safe. You know, you could just throw as any or any anywhere or all sorts of things and and have the thing pass and and work. But that doesn't always mean that it's typed. And especially if you're working on code that other people are consuming. Right? Once you get into the land of writing libraries or anything where other people are consuming, it. You kinda need to have some of these TypeScript

you can then The description goes from a broad string, any string to the string of whatever description we put in there. And then the number type goes from a broad number, any number that exists to 400 or 5.22.

Auto connect to phones and whatnot. Yeah.

In in the case of mine, it was title, string, description, string, number of episodes,

So you there's no chance

or sorry, in TypeScript, When could that be? A settings object that you are creating.

in TypeScript's kinda kinda cool. The both of these things are not your your everyday TypeScript reaches. I put fundamentals in the title. I'm not sure if this is Is a fundamental or not, but certainly it's a it's a bag of tricks. You gotta put it in your back pocket for sure. Yeah. What's the 2nd step from a fundamental? You got your 2nd story of two zero one, I guess. Yeah. Yeah. The yeah. Yeah. The, I I,

make a type from that and store it in a variable. So you can say type of

that you will ever, in your application,

passes the TypeScript compiler

extreme All the IntelliSense and all the typing in it. So if you're to say N o d e. Node is the node course.

Variable declaration somebody tacks on as const.

What as const will do is it will narrow it down from not just any string, but literally the string of syntax f m.

it. You know, Wes just gave me like a a really nice little demo that, he put together. So I think we're gonna kind of roll with that and, CS. And I'm like and and I just look at those people tweeting that, and I say, I don't get it. What are you using this for? What do you like, what is this white white what's celebration about? So, West, do you wanna tell me why people should celebrate or why people should,

aren't really related, but kind of in the same headspace. So we thought we would cover them together. And The first one is what's called the const assertion in TypeScript.

give you a little bit more security in TypeScript. Because, you know, I think all of us as TypeScript Script devs have found it at various points that just because something

I've now I've now found myself in a situation and I need help. Please. Yeah.

Yeah.

tools and tricks to be able to to write the code that actually will allow people to consume your things and have it work.

and that will We'll return to a TypeScript type so you can put that in a type variable,

get generate the type off of that or get the type from it. So putting as cons on the end will make a very narrow type, and it will also make all of the properties in that object read only.

export it, use it anywhere. So if it's easier for you to generate

So do we want to talk about const reverse? Alright. So the const assertion is when you're creating an object in JavaScript. So let's say you say const Podcast is equal to curly brackets. You got a title syntax fm, a description. Cool guys talking about web development,

number. Right? So string string number.

you have now just created a type in TypeScript

to potentially save you in in various aspects of this. It's funny, Clothes, which are cool. Right? When you get older, clothes are the cool thing to get. I'm happy to get some. But the Peloton is really the the star of the show. And,

And then the second one is something that's new in, I believe, TypeScript 4.9, And now this is sort of coming in to fix those use cases. And there's a couple different use cases that have, but the the clearest one is where you have, the boss monster, which is my course application that runs the boss monster. Oh, yeah. The boss monster app.

Here comes constant satisfies, yeah. Yeah. That's the way to be. Did you get anything cool for,

with like that, You generally create what's called a record in TypeScript where you say record, you pass it 2 things, you pass it. What's the key string and what is the value?

You just say this is just an object. And at that point, TypeScript knows an actual value. And what they're doing is somebody is making a union type, a list of all the Keys off of an object, and they're converting it into a TypeScript type, type narrowing, meaning that

all of the options That is an object. And if you want to create a read only object in are releasing this one a little bit late. So apologies both us. Editor, Chris, who, Because the types have been And one of the keys in a customer purchase is, where,

because It can just run through the object and generate an a type for that. If you have a title that is a string and a size that is a number, I often call this a metadata type where the type of an object if you don't specify the type.

after you've created the the settings object, if you type settings dot And you expect to get the drop down of all the settings that you have just typed previous to it.

and react router or something like that. You create a routes object In a lot of my applications, especially my TypeScript course, we have a list of every single currency in in the world.

For each of the routes ahead of time because you, the developer, have to define that.

doesn't know all of the settings So do I have to go and then an object where anything goes. A metadata object.

you you sort of give up JavaScript

you create your Objective settings. You don't give it a type at all.

and the the value of the object is going to be anything. Or or the key of the object is gonna be any, Ahead of time and then create the object. Sometimes it makes sense to create the object and,

TypeScript doesn't know what those settings are. Why? It. Because you literally just created a type for it that says anything can be it. It's it's a bunch of stuff. Yeah. Yeah. Here here Literally, it's a render. Yeah. Key value pairs. Okay. Key value pairs. And that sucks because you lose the IntelliSense. You lose spell checking.

It can it can infer that type for you. However, you you might also have an actual settings type in your application.

So if you want to have

Is it good enough?

The key of the object is a string,

You don't necessarily have all the the beautiful stuff that you are used to getting with the with the thing. So And the value is going to be any basically

And Versus Code doesn't know ahead of time what those settings are going to be because the plug in author does that. Right? wherever I want. Yeah. That's nice. Yeah. Yeah. Pretty handy. Next up, let's talk about satisfies, which is

value is either going to be a string, a number of. Right? Like a simple metadata object. Those are the only values allowed.

a type like that,

is, Generally, string number, boolean or any or something like that.

And Then you can make a new type. Type currency equals type of currencies, ARG is advanced reacting GraphQL.

When you create a type there are ways to do it in the JavaScript runtime,

where there is this type of thing the regular developer will run into.

But they you still should be able to have,

the types for that. You have the settings object that you don't know what the keys are. You don't know what the values are. All you know is that the key is going to be I'm gonna enforce that He is a string. You can't do numbers, keys. And I'm gonna enforce that the You might have seen it once or twice where at the end of a and I'm just generating the types,

You might not know all of the properties like Versus Code You also often in your application, you'll need, like, a union, which is a list of available values.

all the types

another good example is,

what satisfies does currency codes by saying key of that that previous type currency. So Sometimes you'll see key of type of There is some kind of cool stuff you can do with as const and the key of that object is The currency code, USD, CAD, EUR, you are creating an object settings type. So you take your type and say satisfies. And what that allows you to do is you still of my settings type. And by putting what you do at the end of of creation creating your object, just like we said as const earlier, you can simply just say satisfies that it should satisfy the requirements

like a routes object in

on

Man, if I if I get a if there's an opportunity for me to get a streak badge, I'm gonna ride the Peloton every day until I get that stupid badge, and I don't care if it's gonna be hard.

I have

Let's see. I can tell you exactly which day it arrived. It arrived

and we we have that be like our gift to sort of say.

23 active days Since it arrived. And I gotta say, man, I hate cardio, and this thing really makes me like cardio. And it's not The Peloton itself, I think it's the system, the OS, the,

So I am on have maybe,

November And since December 12th, I have only not used it 4 days.

So, yeah, it's it's the system's good. I I found the Android menu in it, and I found all sorts of little fun little stuff. You can, like, Chromecast the screen even though it's not I don't know if it's, like, explicitly part of the US. So, Yeah.

dipping in and out of some Android automation apps the other day to try to make some stuff faster.

Yeah. I got some

Did I get anything cool? We got a Peloton,

like a little bit of the hoarder gene and that like really helps me digitally hoard badges and like

or December 12th.

everything about it. You know, I'm I'm a sucker for badges.

for me, it, Like, makes me feel really good every time. It gives me that endorphin rush that I'm, like, collecting actually something.

of a trophy or something. I want that. So,

satisfies.

and better tools along with those using Satisfye.

you don't necessarily have a type for ahead of time. You don't know the keys, you don't know the values. That's where satisfies is gonna come in handy. Okay.

the type of your settings is not do I need to make

You know what? Again, these are two zero one. These aren't going to be necessarily

Yeah. And that just goes to show how often and then maybe have like a number of shows, which is a number

JSON, but when you want to do it in TypeScript, you can just tack on as const onto the end of it. And what that will do Is it will in the in the past episode, we talked about what type narrowing is. And this will do

all of your IntelliSense, and you get Errors if you accidentally spell something wrong or you try to access a property that doesn't exist. Yeah. Giving you access to what TypeScript is there to do, you know, save. Exactly. If you mess something up. So quite honestly, I thought that, like, I would have thought that that that that worked in TypeScript. Yeah, me too. Already. Yeah.

records that

So I I think these are great Great things to have in your back pocket when you need them, but you might not always need them. So. Exactly. Awesome stuff. Oh, one more thing I should say is

settings. It's just generated from the actual values in there, and that allows you to both I think maybe not every single we have a list of 30 different currencies, The And that's really cool because,

Yeah. So I I think these things are both need as consonant, In this Monday, hasty treat. We're gonna be talking about

But there are use cases metadata, Does it overlap with my settings type? You know, it's I'm not setting it to be that type, That are going to be going the it knows a list of all the settings it gives you. But every time you install a plug in, those plug ins also give you new settings.

the things you reach for all the time. It. But hey. Now you know that if you want values to be explicit and typed explicitly to those values, then, talk about just in general where these things kind of end up being useful and how they can

It.

can be typed but Mhmm. You you might not know essentially what's Going to be in them. Now you can get a little bit better type safety and

maintain when you create

the craziest,

So

Yeah. Yeah. The yeah. I'm the West. So how's it going, West? This is our our our first episode of the the new year at time of recording. How are you feeling? Yeah. Yeah. I'm feeling good. I had a it. Fantastic time off, and

Syntax.

it's, it's good to be back. A little rusty. We,

Boss, and Scott

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

But as far as Rusty goes, yeah, man. I I'm both rusty and revitalized.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

No one else's fault. Definitely.

it. New TypeScript features that really give us a little bit more control and ability to make sure that our code errors when it's supposed to and lets Do the things that we need to do. We're gonna be talking about the new property of satisfies as well as the as const Technique to be able to Along with something like infers or whatever. There's a there's a I I think that's when you start to get into, like, TypeScript superpower is when you can start to really Then TypeScript to your will in that regard. Yeah.

from Denver. And with me, as always,

to no. I'm just joking. Yeah. But apologies to Chris it. As well as everyone who missed it, we're just getting lots of tweets this morning being like, where's the Monday episode? We thought we were 1 more week ahead than we actually were, so, Goof that up on on our end. Yeah. It is our fault. Wes and I's fault.

new TypeScript, since getting the Peloton, we got it I think we we, you know, we we got it on Black Friday. So it arrived.

and I am,

Monday. Monday. Monday.

will probably be dropping everything,

really just make sure our data is typed the way that we want it to be typed.

It is the west boss. The west the west the west no. You're east of me. I was trying to make a joke there, but, no, you're the east boss.