In the last video, we updated our program, so we print out a nice report about a single to do.
However, when we then ran that program, we saw three UN defines inside of our terminal.
So let's figure out what's going wrong.
I want you to take a look at these three variable declarations right here, in every case, we tried
to pull some property off that to do object, so we tried to pull off the property capital ID, capital
T title and finished.
So that's where we made our mistakes.
Take a look at those property names right there.
And then I'm going to flip back over to my browser and take a look at the actual property names that
belong to that title or something that to do object.
The actual property names are lowercase ID, lowercase title.
And it's not finished.
It's completed.
So what's the lesson here?
Well, the lesson is we wrote out some code that had a very nasty bug inside of it, but we were not
made aware of that bug.
We didn't even know it existed until we actually executed our program.
So this right here is exactly what typescript is made to prevent.
TypeScript is going to help us catch errors like these simple typos we just made right here while we
are still writing code inside of our code editor as opposed to when we actually execute our code.
So let's start to now make a couple of changes to this file, we're going to add in a little bit of
basic typescript syntax that's going to help us very easily catch the errors that we just made.
Now, remember, as we start to write out this typescript stuff, we're not really focused on TypeScript
just yet.
So like the syntax, don't worry about it too much just yet.
We're going to go over all the syntax in great detail over time.
But right now, I just want you to see how TypeScript can help us fix the errors that we just made.
So I want to focus on this response data object right here, you would would've been really nice.
It would have been great if we had a comment somewhere in here, like maybe right above, maybe if we
had a comment that said response data has properties of and then we just like listed the property names
out and said, like I.D. and title and completed.
If we had some comment like this right here, then it probably would have been way less likely that
we would have made those typos because we would have seen some information about that data object or
that to do right there on the screen right above.
So this comment right here is essentially what we're going to add in, but in typescript form.
So I'm going to delete that comment and right above my axios call.
I'm going to write out our first little bit of typescript, so I'm going to say interface to do.
I'm going to put down a set of curly braces and then I'm going to write out the three different properties
that the tattoo has, and I'm going to also label that type of data that each of those properties reference.
So I'm going to say ID is a number and I'll put a semicolon at the end of the line.
I'll say title a colon and then string in a semicolon and then completed, which was a boolean like
so.
All right, so this is, like I said, our first little bit of typescript, this defines something called
an interface.
Interfaces in typescript are used to define the structure of an object.
So as you might guess, we are saying that inside of application there's going to be some kind of object
called a to do.
And every to do is going to have three distinct properties.
It's going to have one property called ID, it's going to have a title and it's going to have a completed
property as well.
The ID is going to be a no title is going to be a string and completed is going to be a boolean, so
either true or false, I did not make these property names up or assume these types right here up on
the fly.
If you actually go back over to that JSON printout right here, you'll see that ID was in fact a no
title was a string and completed was a boolean.
So I created that interface to tell TypeScript about what type of information we're going to expect
to receive back from this API.
Now, you'll notice that at this point in time, I'm completely ignoring this user ID property, and
that's really fine inside of an interface.
We can freely ignore properties if we want to.
We'll go into more detail on that later on.
So now that I've told TypeScript about this type of object that's going to exist inside of my application,
I'm going to now go ahead and tell TypeScript that this response data thing right here is going to be
one of those to DOS.
So right after response, that data.
I'm going to say, as you do, like so.
And then as soon as I do so, I'm going to get three heirs right here, light up inside of my editor.
So this right here, this is what it is all about.
TypeScript has analyzed our code using the type annotations or type labeling that we've added into this
program.
And it has found that we might have a possible error.
So it has now underlined these three properties to tell us, hey, developer, you might be doing something
wrong here.
You need to take a look at this and figure out if this is correct or incorrect.
So in this case, we would hover over each of these little errors and we'll see a little message right
here that tells us that exactly what might be going wrong.
So in this case, it says property ID does not exist on a to do did you mean lower case I.D. and that
right there, that is the perfect amount of help that we need to somehow fix up this code.
So instead of capital ID, I'll change that to lowercase ID and then that error message goes away.
Now, just to be totally complete, I'm going to also change the name of the variable to lowercase ID
as well, just to be consistent.
And I'll update the log down here to lowercase ID as well.
So now we would repeat the same process with title or mouseover, and it says, did you mean lower case
T title?
Well, in fact, yup, I did.
And then finally with finished on mouseover and in this case, it just says, hey, that property just
does not exist here.
You probably meant to reference something else.
And so once again, this would be my signal as a developer that I probably did something wrong here
and I need to fix this up so I could go and take a look at my definition of what it to do is once again
and I'll see o the proper name is completed, not finished.
And so I'd go back down and update this to be completed.
And once again I'll change the variable name as well, even though technically I don't have to.
And completed down here as well.
All right, so now we save this program again, we can flip back over to our terminal and attempt to
run this once more.
So I'll do a T.S.A. inducts.
And once I do so, I'll see the correct output at my console.
All right, perfect.
So what's the lesson here?
Well, like I've said several times so far, the goal of TypeScript is to help us cochairs during development.
Notice how we didn't see an error during the compilation phase.
We didn't see an error with our program when we actually ran our code.
We saw an error as soon as we defined this interface thing and then told TypeScript that this object
right here was going to have the same structure as what is described by it to do.
As soon as we added that in, we got some feedback while we were writing our code.
And that was the key.
That was the signal to you and I as a developer that we had to fix something up.
And once again, that is what TypeScript is all about.
All right, so now we've got a little fix in here and everything's looking a lot better.
I want to make one more change this program.
So let's take a quick pause right here and we'll continue in the next video.