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 undefined 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 try to pull some property off of that to object.
So we tried to pull off the property capital I.D. 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 see me that to do object.
The actual property names are lowercase I.D. 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.
Ed as opposed to when we actually execute our code let's start to now make a couple of changes to this
file.
We're gonna 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.
Right now I just want you to see how types can help us fix the errors that we just made so I want to
focus on this response dot data object right here.
You had been really nice.
It would've been great if we had a comment somewhere in here like maybe right above maybe if we had
a comment that said response dot 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 axiom is call.
I'm going to write out our first bit of typescript so I'm gonna say interface to do I'm gonna put down
a set of curly braces and I'm going to write out the three different properties that the two has and
I'm going to also label that type of data that each of those properties reference.
So I'm gonna say I.D. is a number and I'll put a semicolon at the end of the line.
I'll say.
Title.
A colon.
And then string and a semicolon and then completed.
Which was a boolean like so all right.
So this is like I said our first was a bit of typescript this defined 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 gonna have one property called I.D. it's going to have a title and it's going to have a completed
property as well.
The idea 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 sue me these types right here up on the fly if you actually
go back over to that Jason printout right here you'll see that I.D. 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 I.D. property and that's
really fine inside of an interface we can't 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 dot data thing right here is going
to be one of those to dos.
So right after response dot 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 errors 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 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 I.D. does not exist on it 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 I.D. I'll change that to lower case I.D. and then that error message goes away
now just to be totally complete.
I'm going to also change the name that variable to lowercase idea as well just to be consistent and
I'll update the consulate log down here to lowercase I.D. as well so now we would repeat the same process
with title or mouse over.
And it says did you mean lowercase t title.
Well in fact yep I did.
And then finally with finished all mouse over 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 oh 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 test node index dot t yes 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 catch catchers 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 a 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 pick 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.