1 00:00:00,450 --> 00:00:05,130 In this lecture, we're going to explore a concept called type annotations. 2 00:00:05,460 --> 00:00:10,110 There a new syntax feature available in TypeScript to fix our problem. 3 00:00:10,290 --> 00:00:13,470 Our functions argument should be constrained to numbers. 4 00:00:13,770 --> 00:00:17,820 If we attempt to pass any string or Boolean, an error should be thrown. 5 00:00:18,150 --> 00:00:21,360 We can implement this behavior with type annotations. 6 00:00:21,900 --> 00:00:25,770 Type annotations are a way to describe the data in our application. 7 00:00:26,040 --> 00:00:28,680 We can annotate almost anything in our code. 8 00:00:28,860 --> 00:00:33,330 We can annotate variables, functions, arrays and objects. 9 00:00:33,630 --> 00:00:35,310 Let's start with functions. 10 00:00:36,580 --> 00:00:43,150 In the ad shipping function, we're going to annotate the functions parameters, we can annotate a parameter 11 00:00:43,150 --> 00:00:49,210 by adding a colon after the parameter name, followed by the data type for the price parameter. 12 00:00:49,330 --> 00:00:51,700 We're going to set the data type two number. 13 00:00:54,270 --> 00:00:57,150 Will use the same type for the shipping parameter. 14 00:00:59,700 --> 00:01:06,150 By adding these annotations, TypeScript will restrict the type of values we can pass on to this function. 15 00:01:06,540 --> 00:01:09,690 Notice how I'm using the lowercase version of the word. 16 00:01:10,110 --> 00:01:15,390 It's important that we type number with lowercase N instead of an uppercase. 17 00:01:16,170 --> 00:01:19,980 Otherwise, we may confuse the application with the data type. 18 00:01:20,370 --> 00:01:27,510 Let's see what happens when we attempt to compile our code and the command line run the TSC example 19 00:01:27,510 --> 00:01:28,800 acts command. 20 00:01:31,240 --> 00:01:32,800 An error has been produced. 21 00:01:33,070 --> 00:01:36,160 The error is telling us we have a problem on Line five. 22 00:01:36,460 --> 00:01:41,860 It's saying we're passing in a string when it's expecting a number by adding annotations. 23 00:01:41,980 --> 00:01:43,960 We're able to catch errors like these. 24 00:01:44,230 --> 00:01:48,070 We can think of type annotations as a way to document our code. 25 00:01:48,430 --> 00:01:54,310 The compiler will read our documented code and determine if we're doing something out of the ordinary. 26 00:01:54,820 --> 00:01:57,310 Let's fix this issue in the file. 27 00:01:57,430 --> 00:02:00,610 I'm going to remove the quotes from the first argument. 28 00:02:03,170 --> 00:02:05,990 After doing so, I'll compile the code again. 29 00:02:08,550 --> 00:02:11,760 This time, our code gets compiled without a problem. 30 00:02:12,060 --> 00:02:16,650 Let's check out the JavaScript file, the annotations we've added are gone. 31 00:02:16,950 --> 00:02:21,810 TypeScript will remove its features so that our code can run in the browser. 32 00:02:22,200 --> 00:02:28,260 The purpose of using TypeScript is to help us debug our application before running it in an environment. 33 00:02:28,590 --> 00:02:34,020 If the compiler can successfully compile our code, we should be safe from type errors. 34 00:02:34,620 --> 00:02:36,990 Imagine if we were building a checkout system. 35 00:02:37,260 --> 00:02:40,380 A checkout system involves a series of steps. 36 00:02:40,710 --> 00:02:46,470 We wouldn't be able to catch this error until after the user has provided their shipping information 37 00:02:46,830 --> 00:02:51,330 with TypeScript were able to catch the bug before opening the browser. 38 00:02:51,660 --> 00:02:53,370 That's the beauty of TypeScript. 39 00:02:53,970 --> 00:02:56,250 Let's take our example a step further. 40 00:02:56,490 --> 00:03:00,810 We can annotate the return values of a function at the moment. 41 00:03:00,930 --> 00:03:04,830 In the TypeScript file, we're logging a message in our function. 42 00:03:05,190 --> 00:03:08,010 Let's change this line to return the value. 43 00:03:10,610 --> 00:03:17,210 It would be nice if we could tell the compiler will always return a number after the functions parentheses, 44 00:03:17,210 --> 00:03:22,160 but before the curly braces will add a colon, followed by the data type. 45 00:03:22,490 --> 00:03:25,670 In this example, we'll set the data type two number. 46 00:03:28,300 --> 00:03:34,450 The syntax for type annotation is the same syntax for adding type annotation to parameters. 47 00:03:34,750 --> 00:03:37,570 It's a colon followed by the name of the data type. 48 00:03:37,960 --> 00:03:43,030 This piece of code will tell TypeScript the function is only allowed to return numbers. 49 00:03:43,360 --> 00:03:49,430 Let's see what happens if we attempt to return a value with a different type inside the function. 50 00:03:49,450 --> 00:03:51,310 We will return a random string. 51 00:03:53,910 --> 00:03:57,870 Next, in the command line, we'll try to compile the file. 52 00:04:00,390 --> 00:04:05,460 We get an error it's telling us we're attempting to return a string instead of a number. 53 00:04:05,820 --> 00:04:08,220 Our editors also highlight this error. 54 00:04:08,520 --> 00:04:14,940 If you're using Visual Studio code like me, there will be a red squiggly line below the return statements. 55 00:04:15,300 --> 00:04:18,839 We can hover our mouse over this to read the same message. 56 00:04:19,110 --> 00:04:23,580 Let's fix this problem by reverting our changes to the original solution. 57 00:04:26,120 --> 00:04:28,430 Next will compile the scripts. 58 00:04:31,030 --> 00:04:33,880 They compiler successfully compiled our code. 59 00:04:34,180 --> 00:04:40,390 Let's check out the JavaScript file once again, the annotation has been removed from our code. 60 00:04:40,720 --> 00:04:43,180 It's a step performed by TypeScript. 61 00:04:43,750 --> 00:04:46,490 That about wraps it up in the next lecture. 62 00:04:46,510 --> 00:04:49,060 We'll continue exploring TypeScript.