1 00:00:01,090 --> 00:00:04,530 In this video I want to make one additional change to our program. 2 00:00:04,570 --> 00:00:09,730 I want to take this consular statement and extract it into a separate helper function that will allow 3 00:00:09,730 --> 00:00:15,100 us to leave this promised body right here a little bit more compact than it currently is. 4 00:00:15,100 --> 00:00:18,910 So to get started I'm going to define a new function at the bottom of the file. 5 00:00:18,970 --> 00:00:25,890 I'm gonna call it log to do I'm going to set this up as an aero function and I'm going to say that when 6 00:00:25,890 --> 00:00:32,120 we call this function we should take in the arguments I.D. title and completed. 7 00:00:32,180 --> 00:00:37,460 If you see a little nasty underline right here like a yellow or even a red underline that's totally 8 00:00:37,460 --> 00:00:37,850 fine. 9 00:00:37,850 --> 00:00:39,290 Just stick with it for a moment. 10 00:00:40,200 --> 00:00:42,760 Once I define that function I'm going to console irks me. 11 00:00:42,780 --> 00:00:45,470 Cut and paste the console log inside there. 12 00:00:45,660 --> 00:00:54,450 Like so so now we can call that function room up here and that will do our console log for us so I'm 13 00:00:54,450 --> 00:01:03,570 going to call log to do and I'll pass in the I.D. that completed flag and the title like so. 14 00:01:03,750 --> 00:01:07,750 Now once again if you're looking at this and you think thinking Steven you just made an error there. 15 00:01:07,830 --> 00:01:08,680 That's totally fine. 16 00:01:08,700 --> 00:01:10,990 Once again just bear with me for a moment. 17 00:01:11,260 --> 00:01:15,120 So I'm not going to save this file and I'm going to flip back or my turtle and let's try to run this 18 00:01:15,120 --> 00:01:24,050 once more so I'll do a test node index dot t yes in my program runs but if you look carefully the console 19 00:01:24,050 --> 00:01:25,730 log is not quite right. 20 00:01:25,730 --> 00:01:29,030 So it says has a title of false. 21 00:01:29,030 --> 00:01:31,780 Is it finished elect us ot Autumn. 22 00:01:31,910 --> 00:01:34,310 Hmmm something's definitely off here. 23 00:01:34,370 --> 00:01:36,040 So what do we do wrong. 24 00:01:36,510 --> 00:01:41,570 If I flip back over and look very carefully you'll notice on my log to do function I was expecting arguments 25 00:01:41,570 --> 00:01:45,920 in the order of I.D. and then the title and then completed. 26 00:01:45,950 --> 00:01:53,540 However when I called the function I passed an I.D. then completed and then title so I clearly mixed 27 00:01:53,540 --> 00:01:59,570 up the order of arguments into the function and once again I got absolutely no information about the 28 00:01:59,570 --> 00:02:04,370 error that I just made until I actually executed my code at the terminal. 29 00:02:04,400 --> 00:02:09,410 So once again here's the lesson about typescript if we're not using typescript correctly or for just 30 00:02:09,410 --> 00:02:15,680 writing out plain javascript we don't find errors until we run our code which is pretty inefficient 31 00:02:15,680 --> 00:02:17,120 from a developer perspective. 32 00:02:18,130 --> 00:02:23,320 So if we used typescript appropriately we could have gotten a warning about this or some error inside 33 00:02:23,320 --> 00:02:28,720 of our Ed before we ran our code and that would have been a signal to you and me that we had to fix 34 00:02:28,720 --> 00:02:30,150 up something. 35 00:02:30,220 --> 00:02:32,010 So how are we gonna fix this up. 36 00:02:32,020 --> 00:02:37,180 Well I'm going to find my log to do function right here and on each of these arguments I'm going to 37 00:02:37,180 --> 00:02:39,590 add in a type annotation. 38 00:02:39,760 --> 00:02:41,830 So we've used that term several times so far. 39 00:02:41,830 --> 00:02:46,050 Remember we're going to really clarify all these typescript topics in just a moment. 40 00:02:46,060 --> 00:02:47,700 So right now just bear with me. 41 00:02:47,710 --> 00:02:50,970 We're going to add a little bit of typescript syntax here. 42 00:02:51,280 --> 00:02:57,620 So going to say that this idea variable whatever we pass in here it has to be a number and then our 43 00:02:57,620 --> 00:03:03,450 title it has to be a string number that makes sense our title is going to be a string and that completed 44 00:03:03,450 --> 00:03:04,060 a flag. 45 00:03:04,190 --> 00:03:07,060 It has to be a boolean either true or false. 46 00:03:09,850 --> 00:03:15,350 So we've now written out IDI colon number and then the same thing for the other two arguments as well. 47 00:03:15,350 --> 00:03:17,710 Now this is not creating an object or anything like that. 48 00:03:17,710 --> 00:03:23,440 Instead we are trying to describe the type of variable that idea is going to be the type of variable 49 00:03:23,440 --> 00:03:26,260 that title is going to be and the same thing for completed as well. 50 00:03:27,330 --> 00:03:32,360 Now as soon as I add that in I can then see a red underline under the completed flag right here. 51 00:03:32,390 --> 00:03:37,350 Now if I hover over it it will tell me argument of type boolean is not a sizable 2 parameter of type 52 00:03:37,350 --> 00:03:38,460 String. 53 00:03:38,460 --> 00:03:42,010 So what this is telling me is that completed is supposed to be a boolean. 54 00:03:42,030 --> 00:03:42,270 Right. 55 00:03:42,270 --> 00:03:46,760 That's what this is completed is a boolean it is a true or false value. 56 00:03:46,950 --> 00:03:52,950 And I tried to pass it in as the second argument to the log to do a function but log to do says the 57 00:03:52,950 --> 00:03:59,640 second argument has to be a string a boolean is not a string and that's why we are seeing this error. 58 00:03:59,670 --> 00:04:04,620 So once again this is a notice to you and I as the developers that were doing something incorrectly 59 00:04:04,650 --> 00:04:06,590 and we have to fix this up. 60 00:04:06,630 --> 00:04:11,490 So in this case I would probably analyze this and say oh yeah I just made a mistake in the order of 61 00:04:11,490 --> 00:04:12,480 arguments here. 62 00:04:12,570 --> 00:04:18,250 So I would flip the order around like so and then the error message goes away. 63 00:04:18,630 --> 00:04:20,480 And now I can save this file. 64 00:04:20,480 --> 00:04:27,620 I can flip back to my terminal again run the file once more and now I'll see the correct result. 65 00:04:27,670 --> 00:04:29,440 All right so that's it. 66 00:04:29,440 --> 00:04:33,010 Two quick examples of why we like to use typescript. 67 00:04:33,010 --> 00:04:39,100 We just saw two examples of extremely common errors like people making typos on object properties that 68 00:04:39,100 --> 00:04:45,910 happens every day probably thousands or even tens of thousands of times a day across the world with 69 00:04:45,910 --> 00:04:51,150 JavaScript and we also saw an example of calling a function with the incorrect order of arguments. 70 00:04:51,250 --> 00:04:56,950 Also an extremely common error in both cases we would have had to run our code to find these errors 71 00:04:57,280 --> 00:05:02,800 but by using a tiny amount of typescript we found these errors during development and we saved ourselves 72 00:05:02,860 --> 00:05:03,780 a lot of time. 73 00:05:04,660 --> 00:05:09,650 So we've now seen some very basic examples of why we'd like to use typescript. 74 00:05:09,700 --> 00:05:11,000 Let's take a quick pause right here. 75 00:05:11,020 --> 00:05:13,930 We're gonna start working on our next application in the next video.