- Now we've already talked about how
when you use let to define a variable in TypeScript
it's going to give you a generic type essentially number
because it could be any number since I can redefine it.
Well, if you use constant with a primitive value,
it's going to give you that hard-coded literal value.
So B is just one.
That is the only thing it can ever be.
Well, the way that this works is
when you define a constant primitive value
essentially what TypeScript is doing is it's adding this
as const keyword at the end of your value.
And that's just telling TypeScript
that this is a constant value that never changes.
And if I do that to my Let Variable up here,
what happens is if I hover over this A type,
you can see it is set to one.
And that's because it's changing my type.
I'm saying this is a constant variable that never changes
and one is a primitive, so it's just always going to be one.
And that means if I try to redefine A,
it's actually going to throw me an error.
If I just come in here, redefine it.
You can see it's saying, Hey
this string SDF is not assignable to the type of one.
And no matter what I try to set this to
as long as it's not one, one will obviously work.
But if I try to set it to any other value,
you're seeing that I'm going to be getting an error.
And that's because this
as constant is essentially converting this
over and saying this is a constant variable.
Now I would never write code that looks like this
because I should just use the const keyword instead.
But where this becomes really powerful is when
you need to use it with objects and arrays.
Let's coming here
and let's just create an array here.
We'll say numbs
and that's just gonna be one, two, and three.
Actually, let's make this a string so
it's a little bit easier to see what's happening.
So we'll say we have a string of one,
string of two and a string of three.
Now if I hover over this,
you can see that I get a string array.
And if I want to make this an as const,
you're gonna see something really interesting
when I change this as const,
you see that I'm getting a read only array
which we've already talked about a little bit.
I can't add or change anything inside of it.
But you're noticing I'm not getting
a read only array of numbers,
I'm getting an read only array of the string one,
the string two, and the string three.
So that means it only has three specific values.
And if I were to access, for example, index zero
and I just set that to a variable,
you'll notice when I hover over this,
this actually has a hard coded value of one.
And the reason for that is my array knows
that it is 1, 2, 3, those three strings.
So if I access the first property,
it knows it's always going to be the string of one
which is why this can have that type of one.
And if I try to modify it or change anything, for example
I try to change this to something else,
you're gonna see that I'm going to get an error.
Or if I try to push something to the array,
you can see I'm gonna get an error
because that push property doesn't exist.
It does all the same things as read only
but it also converts this array to a literal type.
And the reason this is really useful is
if you want to construct enums
and enum is essentially a way to map
between one value and another.
It gives you like some constant values you can use.
It's really good with like statuses.
So back in the example where we had our statuses
we can have that person type, we can say type person equals
and for now I'm just gonna give them a skill level.
So we're gonna have beginner, intermediate, and expert.
There we go.
So this is a super common thing
that you're going to want to do.
But what happens if you want to loop
through all your skill levels?
For example, I wanna come down here
and I wanna say like skill levels, do four each.
And for each skill level, I want to do something.
We'll just say console.log it for now.
Well, how do I get these skill levels?
I have no way to get them in my JavaScript code
because they're only defined in my TypeScript code.
And TypeScript cannot communicate with JavaScript at all.
But I don't have any way to get these skill levels.
This is where that as const comes in really useful.
'Cause I can create a constant variable.
We're just called this skill levels.
I'm gonna set it to an array that looks just like this.
So instead of using this, you know or syntax,
I'm gonna be converting this just
to a normal JavaScript array.
There we go.
So now my skill levels is an array of strings
but if I set this as a constant,
now you'll see that I have an array that
is either beginner, intermediate, or expert.
So now I can actually use this down here to loop
through my skill levels.
And as you can see, it's going to be
either a beginner, an intermediate or an expert.
So it's going to be working just fine
if I want to loop through them.
But now this skill level here is duplicated code.
I want to change this.
So it relies on this skill level up here.
Well that's where index types come
in that we talked about earlier.
What I can do is I can take this
and I can say I want to loop
through for every single number on my skill level
I wanna make sure I do the type of, so let's just wrap
that in parentheses to be explicit on what we're doing here.
Now if I give that a safe and I hover my skill level,
you can see the type has been set back
to beginner or intermediate or expert.
And the reason this works is
I'm getting the type of this variable.
If we hover over here,
it's just a read only array of these three different things.
And then I'm saying go through every single index.
That's what this number property says right here.
Every single numbered index.
So zero, one and two in my array case,
figure out what the value is
and that's gonna be my new type.
So my type is gonna be one of these three different things.
This is incredibly powerful
because this is the primary way that you are gonna deal
with and work with enums inside of TypeScript.
Now, TypeScript has their own way to create enums
but honestly the TypeScript team recommends you
don't use them because it's a little bit harder to work
with them and they don't really map one-to-one
with JavaScript while doing this with arrays and
as const is much easier and much cleaner what's going on
'cause I just have a normal JavaScript array
and I'm just adding a little bit of TypeScript magic
on the end to help with my typings that are going on here.
Now you can also use as const with objects as well
and it works fairly similar.
So let's just create a person object here.
A name is Kyle, age is gonna be 28.
Let's even go a step further
and we'll nest some stuff inside of it.
So we'll say address and we're gonna give it a street
which is just Main Street.
There we go.
So I have my person and you can see the name
is a type of string.
Age is a number, and the address is a street object
that has a string property.
Now if I set this to as const,
essentially what as const is doing
is it goes through and it makes every single thing
inside of this read only and it's going
to make it so you can't make any modifications.
Now if I hover over my person, you can see all
of my properties have been set to read only.
And also I cannot add new properties to this person object.
So if I come down here and I say person.address.street
and I try to change this, you're gonna see
immediately it's giving me an error because
this is a constant value that cannot be changed.
It's read only.
If I try to add like a zip code onto here,
you're gonna notice again, I'm going to get an error
because that zip code doesn't exist
on this read only type here.
And same thing if I try to change my age, for example
I try to set this to like two.
You can see I'm getting an error.
While if I remove this as const, it's working just fine.
So as const is a really great way
for you to take essentially a value
and to make every single thing inside of it
read only without having to create a separate type
and marking everything as read only.