1
00:00:00,890 --> 00:00:05,710
In the last video we updated our program so we print out a nice report about a single to do.

2
00:00:05,850 --> 00:00:10,420
However when we then ran that program we saw three undefined inside of our terminal.

3
00:00:10,500 --> 00:00:12,920
So let's figure out what's going wrong.

4
00:00:12,990 --> 00:00:16,640
I want you to take a look at these three variable declarations right here.

5
00:00:16,740 --> 00:00:20,340
In every case we try to pull some property off of that to object.

6
00:00:20,340 --> 00:00:25,910
So we tried to pull off the property capital I.D. capital T title and finished.

7
00:00:26,040 --> 00:00:28,430
So that's where we made our mistakes.

8
00:00:28,440 --> 00:00:32,520
Take a look at those property names right there and then I'm going to flip back over to my browser and

9
00:00:32,520 --> 00:00:38,050
take a look at the actual property names that belong to that title or see me that to do object.

10
00:00:38,190 --> 00:00:43,800
The actual property names are lowercase I.D. lowercase title and it's not finished.

11
00:00:43,840 --> 00:00:45,910
It's completed.

12
00:00:45,990 --> 00:00:47,430
So what's the lesson here.

13
00:00:47,430 --> 00:00:53,610
Well the lesson is we wrote out some code that had a very nasty bug inside of it but we were not made

14
00:00:53,610 --> 00:00:54,450
aware of that bug.

15
00:00:54,450 --> 00:00:59,880
We didn't even know it existed until we actually executed our program.

16
00:00:59,940 --> 00:01:05,250
So this right here is exactly what typescript is made to prevent typescript is going to help us catch

17
00:01:05,280 --> 00:01:10,020
errors like these simple typos we just made right here while we are still writing code inside of our

18
00:01:10,020 --> 00:01:10,360
code.

19
00:01:10,360 --> 00:01:16,990
Ed as opposed to when we actually execute our code let's start to now make a couple of changes to this

20
00:01:16,990 --> 00:01:17,410
file.

21
00:01:17,430 --> 00:01:22,450
We're gonna add in a little bit of basic typescript syntax that's going to help us very easily catch

22
00:01:22,450 --> 00:01:24,610
the errors that we just made.

23
00:01:24,610 --> 00:01:29,320
Now remember as we start to write out this typescript stuff we're not really focused on typescript just

24
00:01:29,320 --> 00:01:29,680
yet.

25
00:01:29,740 --> 00:01:33,760
So like the syntax Don't worry about it too much just yet we're going to go over all the syntax in great

26
00:01:33,760 --> 00:01:34,960
detail over time.

27
00:01:35,060 --> 00:01:41,240
Right now I just want you to see how types can help us fix the errors that we just made so I want to

28
00:01:41,240 --> 00:01:44,390
focus on this response dot data object right here.

29
00:01:44,450 --> 00:01:45,880
You had been really nice.

30
00:01:45,920 --> 00:01:50,420
It would've been great if we had a comment somewhere in here like maybe right above maybe if we had

31
00:01:50,420 --> 00:01:54,640
a comment that said response dot data has properties of.

32
00:01:55,040 --> 00:02:01,630
And then we just like listed the property names out and said like I.D. and title and completed.

33
00:02:01,640 --> 00:02:06,080
If we had some comment like this right here then it probably would have been way less likely that we

34
00:02:06,080 --> 00:02:10,910
would have made those typos because we would have seen some information about that data object or that

35
00:02:10,910 --> 00:02:13,820
to do right there on the screen right above.

36
00:02:13,850 --> 00:02:19,940
So this comment right here is essentially what we're going to add in but in typescript form so I'm going

37
00:02:19,940 --> 00:02:25,330
to delete that comment and right above my axiom is call.

38
00:02:25,550 --> 00:02:32,790
I'm going to write out our first bit of typescript so I'm gonna say interface to do I'm gonna put down

39
00:02:32,790 --> 00:02:39,630
a set of curly braces and I'm going to write out the three different properties that the two has and

40
00:02:39,630 --> 00:02:44,880
I'm going to also label that type of data that each of those properties reference.

41
00:02:44,880 --> 00:02:50,150
So I'm gonna say I.D. is a number and I'll put a semicolon at the end of the line.

42
00:02:50,430 --> 00:02:50,730
I'll say.

43
00:02:50,730 --> 00:02:51,460
Title.

44
00:02:51,660 --> 00:02:52,680
A colon.

45
00:02:52,860 --> 00:02:56,250
And then string and a semicolon and then completed.

46
00:02:56,250 --> 00:03:00,810
Which was a boolean like so all right.

47
00:03:00,810 --> 00:03:05,730
So this is like I said our first was a bit of typescript this defined something called an interface

48
00:03:06,300 --> 00:03:11,190
interfaces in typescript are used to define the structure of an object.

49
00:03:11,190 --> 00:03:15,540
So as you might guess we are saying that inside of application there's going to be some kind of object

50
00:03:15,540 --> 00:03:20,760
called a to do and every to do is going to have three distinct properties.

51
00:03:20,910 --> 00:03:26,610
It's gonna have one property called I.D. it's going to have a title and it's going to have a completed

52
00:03:26,610 --> 00:03:28,410
property as well.

53
00:03:28,460 --> 00:03:33,740
The idea is going to be a no title is going to be a string and completed is going to be a boolean.

54
00:03:33,770 --> 00:03:35,570
So either true or false.

55
00:03:35,900 --> 00:03:41,300
I did not make these property names up or sue me these types right here up on the fly if you actually

56
00:03:41,300 --> 00:03:46,790
go back over to that Jason printout right here you'll see that I.D. was in fact a no title was a string

57
00:03:47,060 --> 00:03:49,280
and completed was a boolean.

58
00:03:49,280 --> 00:03:54,050
So I created that interface to tell typescript about what type of information we're going to expect

59
00:03:54,050 --> 00:03:56,380
to receive back from this API.

60
00:03:56,390 --> 00:04:01,040
Now you'll notice that at this point in time I'm completely ignoring this user I.D. property and that's

61
00:04:01,040 --> 00:04:06,230
really fine inside of an interface we can't freely ignore properties if we want to we'll go into more

62
00:04:06,230 --> 00:04:08,640
detail on that later on.

63
00:04:08,640 --> 00:04:13,410
So now that I've told typescript about this type of object that's going to exist inside of my application

64
00:04:13,920 --> 00:04:19,620
I'm going to now go ahead and tell typescript that this response dot data thing right here is going

65
00:04:19,620 --> 00:04:22,000
to be one of those to dos.

66
00:04:22,040 --> 00:04:30,580
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

67
00:04:30,580 --> 00:04:34,210
going to get three errors right here light up inside of my editor.

68
00:04:34,390 --> 00:04:42,040
So this right here this is what it is all about typescript has analyzed our code using the type annotations

69
00:04:42,430 --> 00:04:48,360
or type labeling that we've added into this program and it has found that we might have a possible error.

70
00:04:48,520 --> 00:04:53,920
So it has now underlined these three properties to tell us Hey developer you might be doing something

71
00:04:53,920 --> 00:04:54,900
wrong here.

72
00:04:55,030 --> 00:05:01,040
You need to take a look at this and figure out if this is correct or incorrect so in this case we would

73
00:05:01,040 --> 00:05:06,500
hover over each these little errors and we'll see a little message right here that tells us that exactly

74
00:05:06,500 --> 00:05:12,220
what might be going wrong so in this case it says property I.D. does not exist on it to do.

75
00:05:12,220 --> 00:05:17,920
Did you mean lower case I.D. and that right there that is the perfect amount of help that we need to

76
00:05:17,920 --> 00:05:20,110
somehow fix up this code.

77
00:05:20,110 --> 00:05:25,300
So instead of capital I.D. I'll change that to lower case I.D. and then that error message goes away

78
00:05:26,260 --> 00:05:27,570
now just to be totally complete.

79
00:05:27,570 --> 00:05:32,210
I'm going to also change the name that variable to lowercase idea as well just to be consistent and

80
00:05:32,220 --> 00:05:38,010
I'll update the consulate log down here to lowercase I.D. as well so now we would repeat the same process

81
00:05:38,010 --> 00:05:39,420
with title or mouse over.

82
00:05:39,420 --> 00:05:41,910
And it says did you mean lowercase t title.

83
00:05:41,910 --> 00:05:44,100
Well in fact yep I did.

84
00:05:44,100 --> 00:05:48,600
And then finally with finished all mouse over and in this case it just says hey that property just does

85
00:05:48,600 --> 00:05:49,460
not exist here.

86
00:05:49,470 --> 00:05:51,920
You probably meant to reference something else.

87
00:05:51,960 --> 00:05:56,580
And so once again this would be my signal as a developer that I probably did something wrong here and

88
00:05:56,580 --> 00:06:01,620
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

89
00:06:01,900 --> 00:06:05,880
and I'll see oh the proper name is completed not finished.

90
00:06:06,000 --> 00:06:09,370
And so I'd go back down and update this to be completed.

91
00:06:09,420 --> 00:06:11,490
And once again I'll change the variable name as well.

92
00:06:11,490 --> 00:06:18,040
Even though technically I don't have to and completed down here as well.

93
00:06:18,080 --> 00:06:18,280
All right.

94
00:06:18,280 --> 00:06:20,130
So now we save this program again.

95
00:06:20,300 --> 00:06:23,890
We can flip back over to our terminal and attempt to run this once more.

96
00:06:23,890 --> 00:06:31,370
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.

97
00:06:31,380 --> 00:06:31,650
All right.

98
00:06:31,650 --> 00:06:32,850
Perfect.

99
00:06:32,850 --> 00:06:33,870
So what's the lesson here.

100
00:06:34,290 --> 00:06:39,360
Well like I've said several times so far the goal of typescript is to help us catch catchers during

101
00:06:39,360 --> 00:06:40,750
development.

102
00:06:40,830 --> 00:06:44,410
Notice how we didn't see an error during the compilation phase.

103
00:06:44,520 --> 00:06:47,890
We didn't see an error with our program when we actually ran our code.

104
00:06:47,940 --> 00:06:54,060
We saw an error as soon as we defined this interface thing and then told typescript that this object

105
00:06:54,060 --> 00:06:59,520
right here was going to have the same structure as what is described by a to do as soon as we added

106
00:06:59,520 --> 00:06:59,970
that in.

107
00:07:00,090 --> 00:07:04,740
We got some feedback while we were writing our code and that was the key.

108
00:07:04,770 --> 00:07:08,960
That was the signal to you and I as a developer that we had to pick something up.

109
00:07:09,100 --> 00:07:13,240
And once again that is what typescript is all about.

110
00:07:13,490 --> 00:07:13,800
All right.

111
00:07:13,800 --> 00:07:16,590
So now we've got a little fix in here and everything's looking a lot better.

112
00:07:16,590 --> 00:07:17,790
I want to make one more change.

113
00:07:17,790 --> 00:07:18,510
This program.

114
00:07:18,510 --> 00:07:21,390
So let's take a quick pause right here and we'll continue in the next video.