All language subtitles for 7. A Little Bit of TypeScript

So we have created our state and it is working the way that we expect it to.

However, right now we have two potential problems that could arise, especially if we haven't worked

on this application for a while or if we're working with a larger team.

So let's actually talk about that issue.

Right now, our options is an object, and that object should only include the gender popularity and

the length because those are the only options that we have.

However, right now we have the ability to add other properties.

So for example, we can add this random property called milk and we can assign that to be equal to true.

And this is a okay, the way that we have set things up and obviously we probably do not want to add

this property inside of this reactive state.

So that's problem number one.

Problem number two is the value of these properties.

Right now, we have specified that this is a girl, but it also could be a boy and it also could be

unisex.

However, we could also specify that this is going to be something like know girly or whatever.

We can add whatever thing that we want.

And obviously we do not want to have this ability.

You can either choose girl, boy or unisex.

So I'm really over here for this property.

You can only choose unique or trendy.

You can't put anything else in there.

So those are the two potential issues that we are facing now in order to fix this.

What we need to do is explicitly define the type of our properties and this is where TypeScript comes

in to place.

So right now we've been using plain old vanilla JavaScript.

However, what we want to do is use TypeScript to define the types of our variables and our state.

Now, if this doesn't make much sense to you, well, let me explain.

So in order to actually utilize TypeScript inside of this script tag, all we need to do is right after

this set up or before.

If you want to, you can specify that the language is going to be equal to T.S. and we can go ahead

and save that.

And there we go.

Now we are.

Now we can utilize TypeScript.

Now, right away you can see that nothing has really changed if you go back to our application and refresh.

Nothing has changed and that's A-OK.

This is expected.

But now what we're going to do is get a bunch of different properties that we can utilize to define

specific types.

Just to quickly explain exactly what I mean here, I'm going to declare a variable.

I'm not going to make this a let.

I'm going to say let my name.

I'm going to say that this is going to be equal to length like.

So now over here, I'm going to go ahead and reassign my name to my age, which is 25.

Now, if we weren't using TypeScript, let me just get rid of this for now.

You can see and save that.

You can see that this is actually a.

Okay.

This is completely fine.

Now, if we go back and we add TypeScript again, now this is actually not fine.

We get this squiggly line.

And if you go over here, you can see that it's saying that the type number is not assignable to type

string.

So because what we did here was we declared that this is going to be equal to length, the string length.

It gave this the type of string and that's basically how it assigned it.

So it is like let my name colon string.

And we can also explicitly say that this is going to be of type string like so.

Now what we're doing is we're trying to reassign that to a number and TypeScript is yelling at us,

so we can't do this.

And this is really good because of course we don't want to we don't often want to change types.

So over here we can do this.

And if we said something like 23, then now it's going to yell out of saying that this is equal to 23

when it should be a string.

So over here that is going to give us a little bit of extra security and maintain the integrity of our

code base.

So now what we're going to do is we're actually going to define the type of this state object.

So just for now, I'm going to just duplicate this object.

I'm say content object, and I'm going to say that this is going to be equal to an empty object.

I'm going to try to give it the exact same type as we have over here.

Now, in order to define a type of an object, TypeScript gives us this very important thing called

interface.

So this is going to allow us to define the type of an object.

So we're going to say interface and I'm going to call this, well, whatever it is that we want to call

it.

So I'm going to call this option state because that's what we're trying to define.

The option state.

I will do curly braces.

Now, right in here, we're going to define the type of each key value pair.

So the.

First thing we're going to do is we're going to say that, hey, there is going to have a key and that's

going to be called gender.

And this is going to have a type of string.

And then we do semicolons.

We're also going to say that this object should have a popularity key and it should have a value of

string.

And lastly, we should have a length key that has also a value of string.

And now what we can do is we can actually apply this interface to this object so we can say colon and

then options state.

And right away, you can see that we're getting a little bit of issues telling us, hey, we do not

have the gender or popularity or length keys right over here.

So now what we can do is we can apply gender.

And you can see right away we're actually getting this cool autofill.

That's because it understands the type.

So we can say gender.

You just put whatever string that we want in here.

Let's just say girl for now.

And then over here we can say something like length and we can say all.

And then lastly, the popularity is going to be unique.

Like so.

So right away you can see that now it's happy with us.

And if we added in additional property like milk is equal to true, it's going to yell at us because

it's saying that, hey, this isn't part of the type right over here.

We didn't define this.

So if this was indeed a property that we wanted to add, we would have to explicitly go to the interface

and then define here that we want to have a property called Milk that is a boolean.

And that pretty much means that yes, we indeed want to do this.

Now, of course, we don't want to do this.

So this is go ahead and get rid of that.

So that solves problem number one.

But what is problem number two?

Well, problem number two is we're defining that this is going to be a very generic string.

So we could, if you wanted to over here, instead of saying maybe length of all we can say length of

medium.

And that's actually not an option that we support.

We only have short, long or all of them, but we don't have this medium option.

Now, maybe another engineer that's not very familiar with this up, they could add this in there,

and that's completely fine with TypeScript.

So what we could do is we need to actually explicitly say the different types of strings that we can

have for a specific key.

Now in TypeScript, there's another thing that we can utilize called an enum to define this.

So we're going to say enum gender array to do curly braces.

And then right in here, we're going to define all of the different options that we have for a particular

gender option.

So over here I'm going to say gender and I'm going to say something like, girl.

And this is all going to be in capital.

We can actually assign that to the value of the string value of girl like.

So the number do comma as all capital.

Just because there's just a common convention where I say, boy, and then over here we going to say

unisex.

And that's going to be equal to unisex like so.

And then now what we can do is we can actually grab this enum.

And instead of saying that this is going to be a generic string, we can just define that this is going

to be of type gender.

So now instead of saying String Girl, we'll say gender dot girl, like, so now we can actually do

the exact same thing.

For the popularity.

So popularity as well as the length.

So for the popularity, we are going to figure out the options.

I think it was trendy and then also over here forgot the option for this.

Again, I think it was unique.

Unique like so.

So let's go ahead and change the value of those as well.

So we're going to say trendy.

And then unique.

And then over here for the length we're going to have, shorts is equal to shorts.

Short like so.

We're also going to have long.

That's equal to long.

And lastly, we're going to have all that's equal to all like so.

So over here, what we can do is say popularity.

And then over here we can say length.

So again now if you want to specify something, you're going to have to explicitly say length, dot,

whatever it is, you don't have the option to add length, dot, medium.

You only have these options right over here.

So ensures that, well, we're going to pick the right thing.

So trendy like so, so there we go.

So this is really, really good.

Now, of course, the application is working the way we expected because we didn't apply these types

over here.

So what I want to do is actually want to get rid of this object.

This is just like kind of a test object.

We don't really need that.

But what I want to do is I want to grab this type and apply it to this reactive state.

In order to do that, you might be thinking we can just do all the same thing that we did over here

so we could do just colon and then that.

That's actually not how it works.

And to prove it to you, let's just go back, get that object that we had before.

Let's copy that and let's paste that in there and then over here.

Let's do.

Colon.

And then this actually.

Well, I guess that does work.

But the way that I prefer doing it is over here, right in the reactive.

What you can do is you can add these brackets, these triangle brackets, and then you can add the state

right in there and that accomplishes the exact same thing.

So now again, if you decided to put in like a random string, it's going to yell at us.

Let's go ahead and save this.

And right now, you can see it's actually working the exact same way because these values over here,

the correspond to these values right here.

Now, to actually make this a little bit better, what we can do is we can actually grab these genomes

and we can utilize them inside of these classes.

So instead of saying that the options dot gender is equal to the string boy, we can say that this is

going to be equal to gender.

Dot and then boy like so.

And this should work.

Okay.

So this would work the exact same way.

So over here you can say gender, diet, you need sex.

And then over here, gender.

Dot girl.

And if we save that again, it's working the exact same way.

Girl is still highlighted over here.

So let's go ahead and actually do that in here as well as we're going to say.

We're going to say option or sorry, this is going to be popularity the enum popularity dots.

This is which one is this one?

Trendy.

Okay.

And then let's just copy that in and we're going to say unique here.

Unique.

And let's go right over here.

We're going to say length.

Dots.

And over here, we're going to stay longer.

Scrub that.

NSA all over here so length that all.

And then lastly, we're going to say length.

Dot shorts.

Okay.

So again.

Works exactly the same way.

So this is looking great and I hope you guys actually learned quite a bit about TypeScript when doing

this.

And the reason why we would want to utilize TypeScript is is very, very powerful and important to utilize.