1 00:00:00,780 --> 00:00:05,160 In the last video, we updated our program, so we print out a nice report about a single to do. 2 00:00:05,760 --> 00:00:10,100 However, when we then ran that program, we saw three UN defines inside of our terminal. 3 00:00:10,440 --> 00:00:12,050 So let's figure out what's going wrong. 4 00:00:12,890 --> 00:00:17,600 I want you to take a look at these three variable declarations right here, in every case, we tried 5 00:00:17,600 --> 00:00:23,750 to pull some property off that to do object, so we tried to pull off the property capital ID, capital 6 00:00:23,750 --> 00:00:25,310 T title and finished. 7 00:00:26,000 --> 00:00:27,920 So that's where we made our mistakes. 8 00:00:28,400 --> 00:00:30,140 Take a look at those property names right there. 9 00:00:30,530 --> 00:00:34,970 And then I'm going to flip back over to my browser and take a look at the actual property names that 10 00:00:34,970 --> 00:00:37,760 belong to that title or something that to do object. 11 00:00:38,120 --> 00:00:42,400 The actual property names are lowercase ID, lowercase title. 12 00:00:42,650 --> 00:00:43,760 And it's not finished. 13 00:00:43,760 --> 00:00:45,020 It's completed. 14 00:00:45,930 --> 00:00:47,080 So what's the lesson here? 15 00:00:47,370 --> 00:00:53,400 Well, the lesson is we wrote out some code that had a very nasty bug inside of it, but we were not 16 00:00:53,400 --> 00:00:54,440 made aware of that bug. 17 00:00:54,450 --> 00:00:59,240 We didn't even know it existed until we actually executed our program. 18 00:00:59,880 --> 00:01:03,090 So this right here is exactly what typescript is made to prevent. 19 00:01:03,510 --> 00:01:08,520 TypeScript is going to help us catch errors like these simple typos we just made right here while we 20 00:01:08,520 --> 00:01:13,560 are still writing code inside of our code editor as opposed to when we actually execute our code. 21 00:01:14,440 --> 00:01:18,700 So let's start to now make a couple of changes to this file, we're going to add in a little bit of 22 00:01:18,700 --> 00:01:23,620 basic typescript syntax that's going to help us very easily catch the errors that we just made. 23 00:01:24,490 --> 00:01:29,050 Now, remember, as we start to write out this typescript stuff, we're not really focused on TypeScript 24 00:01:29,050 --> 00:01:29,730 just yet. 25 00:01:29,740 --> 00:01:31,960 So like the syntax, don't worry about it too much just yet. 26 00:01:31,960 --> 00:01:34,660 We're going to go over all the syntax in great detail over time. 27 00:01:34,900 --> 00:01:39,340 But right now, I just want you to see how TypeScript can help us fix the errors that we just made. 28 00:01:40,570 --> 00:01:45,850 So I want to focus on this response data object right here, you would would've been really nice. 29 00:01:45,880 --> 00:01:50,320 It would have been great if we had a comment somewhere in here, like maybe right above, maybe if we 30 00:01:50,320 --> 00:01:56,710 had a comment that said response data has properties of and then we just like listed the property names 31 00:01:56,710 --> 00:02:00,970 out and said, like I.D. and title and completed. 32 00:02:01,540 --> 00:02:05,950 If we had some comment like this right here, then it probably would have been way less likely that 33 00:02:05,950 --> 00:02:10,780 we would have made those typos because we would have seen some information about that data object or 34 00:02:10,780 --> 00:02:13,170 that to do right there on the screen right above. 35 00:02:13,780 --> 00:02:18,760 So this comment right here is essentially what we're going to add in, but in typescript form. 36 00:02:19,510 --> 00:02:24,340 So I'm going to delete that comment and right above my axios call. 37 00:02:25,450 --> 00:02:31,180 I'm going to write out our first little bit of typescript, so I'm going to say interface to do. 38 00:02:32,170 --> 00:02:37,420 I'm going to put down a set of curly braces and then I'm going to write out the three different properties 39 00:02:37,600 --> 00:02:44,050 that the tattoo has, and I'm going to also label that type of data that each of those properties reference. 40 00:02:44,810 --> 00:02:49,540 So I'm going to say ID is a number and I'll put a semicolon at the end of the line. 41 00:02:50,360 --> 00:02:58,390 I'll say title a colon and then string in a semicolon and then completed, which was a boolean like 42 00:02:58,390 --> 00:02:58,720 so. 43 00:03:00,340 --> 00:03:04,750 All right, so this is, like I said, our first little bit of typescript, this defines something called 44 00:03:04,750 --> 00:03:05,710 an interface. 45 00:03:06,220 --> 00:03:10,680 Interfaces in typescript are used to define the structure of an object. 46 00:03:11,110 --> 00:03:15,550 So as you might guess, we are saying that inside of application there's going to be some kind of object 47 00:03:15,550 --> 00:03:16,540 called a to do. 48 00:03:17,110 --> 00:03:20,400 And every to do is going to have three distinct properties. 49 00:03:20,800 --> 00:03:26,620 It's going to have one property called ID, it's going to have a title and it's going to have a completed 50 00:03:26,620 --> 00:03:27,480 property as well. 51 00:03:28,410 --> 00:03:33,930 The ID is going to be a no title is going to be a string and completed is going to be a boolean, so 52 00:03:33,930 --> 00:03:39,900 either true or false, I did not make these property names up or assume these types right here up on 53 00:03:39,900 --> 00:03:40,460 the fly. 54 00:03:40,800 --> 00:03:45,420 If you actually go back over to that JSON printout right here, you'll see that ID was in fact a no 55 00:03:45,840 --> 00:03:48,480 title was a string and completed was a boolean. 56 00:03:49,230 --> 00:03:54,060 So I created that interface to tell TypeScript about what type of information we're going to expect 57 00:03:54,060 --> 00:03:55,560 to receive back from this API. 58 00:03:56,310 --> 00:04:00,870 Now, you'll notice that at this point in time, I'm completely ignoring this user ID property, and 59 00:04:00,870 --> 00:04:03,060 that's really fine inside of an interface. 60 00:04:03,060 --> 00:04:05,220 We can freely ignore properties if we want to. 61 00:04:05,400 --> 00:04:07,410 We'll go into more detail on that later on. 62 00:04:08,600 --> 00:04:13,430 So now that I've told TypeScript about this type of object that's going to exist inside of my application, 63 00:04:13,820 --> 00:04:20,029 I'm going to now go ahead and tell TypeScript that this response data thing right here is going to be 64 00:04:20,060 --> 00:04:21,220 one of those to DOS. 65 00:04:21,980 --> 00:04:23,540 So right after response, that data. 66 00:04:24,520 --> 00:04:27,850 I'm going to say, as you do, like so. 67 00:04:28,660 --> 00:04:33,750 And then as soon as I do so, I'm going to get three heirs right here, light up inside of my editor. 68 00:04:34,330 --> 00:04:37,180 So this right here, this is what it is all about. 69 00:04:37,810 --> 00:04:44,350 TypeScript has analyzed our code using the type annotations or type labeling that we've added into this 70 00:04:44,350 --> 00:04:44,890 program. 71 00:04:45,370 --> 00:04:48,100 And it has found that we might have a possible error. 72 00:04:48,460 --> 00:04:53,920 So it has now underlined these three properties to tell us, hey, developer, you might be doing something 73 00:04:53,920 --> 00:04:54,580 wrong here. 74 00:04:54,940 --> 00:04:58,870 You need to take a look at this and figure out if this is correct or incorrect. 75 00:04:59,960 --> 00:05:04,430 So in this case, we would hover over each of these little errors and we'll see a little message right 76 00:05:04,430 --> 00:05:07,540 here that tells us that exactly what might be going wrong. 77 00:05:08,510 --> 00:05:14,780 So in this case, it says property ID does not exist on a to do did you mean lower case I.D. and that 78 00:05:14,780 --> 00:05:19,220 right there, that is the perfect amount of help that we need to somehow fix up this code. 79 00:05:20,060 --> 00:05:25,300 So instead of capital ID, I'll change that to lowercase ID and then that error message goes away. 80 00:05:26,180 --> 00:05:30,200 Now, just to be totally complete, I'm going to also change the name of the variable to lowercase ID 81 00:05:30,200 --> 00:05:31,460 as well, just to be consistent. 82 00:05:32,060 --> 00:05:35,210 And I'll update the log down here to lowercase ID as well. 83 00:05:36,340 --> 00:05:41,200 So now we would repeat the same process with title or mouseover, and it says, did you mean lower case 84 00:05:41,200 --> 00:05:41,740 T title? 85 00:05:41,830 --> 00:05:43,240 Well, in fact, yup, I did. 86 00:05:44,020 --> 00:05:48,370 And then finally with finished on mouseover and in this case, it just says, hey, that property just 87 00:05:48,370 --> 00:05:49,420 does not exist here. 88 00:05:49,420 --> 00:05:51,310 You probably meant to reference something else. 89 00:05:51,880 --> 00:05:56,470 And so once again, this would be my signal as a developer that I probably did something wrong here 90 00:05:56,470 --> 00:06:01,630 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 91 00:06:01,900 --> 00:06:05,260 and I'll see o the proper name is completed, not finished. 92 00:06:05,890 --> 00:06:09,330 And so I'd go back down and update this to be completed. 93 00:06:09,340 --> 00:06:13,090 And once again I'll change the variable name as well, even though technically I don't have to. 94 00:06:14,940 --> 00:06:16,440 And completed down here as well. 95 00:06:17,940 --> 00:06:22,590 All right, so now we save this program again, we can flip back over to our terminal and attempt to 96 00:06:22,590 --> 00:06:23,820 run this once more. 97 00:06:23,830 --> 00:06:25,980 So I'll do a T.S.A. inducts. 98 00:06:27,070 --> 00:06:30,430 And once I do so, I'll see the correct output at my console. 99 00:06:31,280 --> 00:06:32,150 All right, perfect. 100 00:06:32,810 --> 00:06:33,860 So what's the lesson here? 101 00:06:34,190 --> 00:06:39,990 Well, like I've said several times so far, the goal of TypeScript is to help us cochairs during development. 102 00:06:40,760 --> 00:06:44,150 Notice how we didn't see an error during the compilation phase. 103 00:06:44,480 --> 00:06:47,600 We didn't see an error with our program when we actually ran our code. 104 00:06:47,900 --> 00:06:54,080 We saw an error as soon as we defined this interface thing and then told TypeScript that this object 105 00:06:54,080 --> 00:06:58,160 right here was going to have the same structure as what is described by it to do. 106 00:06:58,670 --> 00:07:02,900 As soon as we added that in, we got some feedback while we were writing our code. 107 00:07:03,260 --> 00:07:04,680 And that was the key. 108 00:07:04,730 --> 00:07:08,870 That was the signal to you and I as a developer that we had to fix something up. 109 00:07:09,020 --> 00:07:11,990 And once again, that is what TypeScript is all about. 110 00:07:13,330 --> 00:07:16,390 All right, so now we've got a little fix in here and everything's looking a lot better. 111 00:07:16,510 --> 00:07:18,460 I want to make one more change this program. 112 00:07:18,460 --> 00:07:21,430 So let's take a quick pause right here and we'll continue in the next video.