1 00:00:00,210 --> 00:00:03,060 In this section, we're going to learn about TypeScript. 2 00:00:03,360 --> 00:00:06,840 TypeScript is a programming language primarily used with angular. 3 00:00:07,110 --> 00:00:09,360 It's completely optional to use TypeScript. 4 00:00:09,600 --> 00:00:11,910 However, I highly recommend learning it. 5 00:00:12,210 --> 00:00:16,860 A majority of projects, tutorials and examples are written with TypeScript. 6 00:00:17,160 --> 00:00:18,270 It's hard to escape. 7 00:00:18,600 --> 00:00:22,890 So if you want to learn angular learning, TypeScript is a must. 8 00:00:23,520 --> 00:00:25,230 If you already know TypeScript. 9 00:00:25,380 --> 00:00:27,780 Feel free to skip this section of the course. 10 00:00:28,140 --> 00:00:32,490 I'm not going to be teaching anything groundbreaking as long as you know the basics. 11 00:00:32,549 --> 00:00:33,720 You should be good to go. 12 00:00:34,080 --> 00:00:36,810 Otherwise, let's learn TypeScript together. 13 00:00:37,380 --> 00:00:39,120 So what is TypeScript? 14 00:00:39,480 --> 00:00:42,090 TypeScript is a superset of JavaScript. 15 00:00:42,420 --> 00:00:45,510 It is a language built on top of each JavaScript language. 16 00:00:45,720 --> 00:00:51,840 If you know JavaScript, you know, TypeScript features such as variables, conditional statements and 17 00:00:51,840 --> 00:00:54,420 functions are written the same way in TypeScript. 18 00:00:54,750 --> 00:00:58,920 We don't need to learn an entirely new set of syntax rules for getting started. 19 00:00:59,220 --> 00:01:04,980 In fact, we can rename our files to TypeScript without modifying the original source code. 20 00:01:05,400 --> 00:01:07,590 Our JavaScript code would still work. 21 00:01:08,280 --> 00:01:13,020 Instead, TypeScript adds features to improve the developer experience. 22 00:01:13,350 --> 00:01:19,950 Notice how I said developer experience TypeScript doesn't add features for enhancing the performance 23 00:01:19,950 --> 00:01:21,390 or security of an app. 24 00:01:21,750 --> 00:01:27,300 Instead, it's a language designed to help developers debug and design their applications. 25 00:01:27,660 --> 00:01:34,800 It accomplishes this goal by introducing static typing to the language as we know data types or categories 26 00:01:34,800 --> 00:01:35,640 for our data. 27 00:01:35,910 --> 00:01:39,600 We have strings, numbers, Boolean and objects. 28 00:01:40,020 --> 00:01:42,300 These are just some examples of data types. 29 00:01:42,630 --> 00:01:46,980 For the most part, we never have to worry about the data type of our variables. 30 00:01:47,310 --> 00:01:50,280 JavaScript is a dynamically typed language. 31 00:01:50,580 --> 00:01:56,280 We have the opportunity to change the data type of our variables at any point in our application. 32 00:01:56,790 --> 00:01:57,810 Here's an example. 33 00:01:57,900 --> 00:01:59,970 We have a variable called price. 34 00:02:00,270 --> 00:02:03,480 The data type starts as a number online, too. 35 00:02:03,540 --> 00:02:07,200 The variable is updated to a string behind the scenes. 36 00:02:07,320 --> 00:02:10,380 The environment will change the data type on our behalf. 37 00:02:10,680 --> 00:02:13,650 It won't complain if we attempt to do something like this. 38 00:02:14,310 --> 00:02:15,900 This feature is convenient. 39 00:02:16,110 --> 00:02:19,200 It's one of the reasons why JavaScript is beginner friendly. 40 00:02:19,440 --> 00:02:24,840 While suitable, there are some pitfalls beginners can fall into in a large application. 41 00:02:24,990 --> 00:02:29,790 Data is constantly flowing through different files, objects, and functions. 42 00:02:30,390 --> 00:02:32,730 Let's say we're developing a checkout system. 43 00:02:33,090 --> 00:02:36,120 The user will want the grand total for their purchase. 44 00:02:36,330 --> 00:02:42,120 However, before we present them with a total, we may want to run their purchase price through several 45 00:02:42,120 --> 00:02:42,840 functions. 46 00:02:43,230 --> 00:02:45,780 For example, what if they're using a coupon? 47 00:02:45,900 --> 00:02:48,420 We should apply the coupon to the price first. 48 00:02:48,660 --> 00:02:49,680 Not so fast. 49 00:02:49,800 --> 00:02:51,540 We need to calculate taxes. 50 00:02:51,810 --> 00:02:56,010 Don't forget to add the cost of shipping during this entire process. 51 00:02:56,160 --> 00:02:59,700 The price will be passed around through a couple of functions. 52 00:03:00,030 --> 00:03:03,600 It's possible that the data type may change during this process. 53 00:03:03,870 --> 00:03:06,840 If it does, we may get unexpected behavior. 54 00:03:07,470 --> 00:03:10,020 Our functions assume the price will be a number. 55 00:03:10,260 --> 00:03:11,930 What if it changes to a string? 56 00:03:11,970 --> 00:03:13,980 JavaScript won't throw an error. 57 00:03:14,280 --> 00:03:17,930 It'll allow the data type to change even when we don't want it to. 58 00:03:18,330 --> 00:03:22,740 We'll only find out if the data type changes by testing the app in the browser. 59 00:03:23,070 --> 00:03:27,390 Wouldn't it be convenient to catch this type of error in our code while writing it? 60 00:03:27,690 --> 00:03:29,640 That's possible with TypeScript. 61 00:03:31,200 --> 00:03:33,030 We'll get into TypeScript in a moment. 62 00:03:33,120 --> 00:03:36,210 But let's see how this error can happen in our script. 63 00:03:36,600 --> 00:03:38,340 I prepared a little example. 64 00:03:38,580 --> 00:03:41,910 It's a single file called example, not jazz. 65 00:03:42,480 --> 00:03:45,900 In this example, I have a function called add shipping. 66 00:03:46,200 --> 00:03:49,470 It has two arguments called price and shipping. 67 00:03:49,920 --> 00:03:53,130 The price argument refers to the price of the product. 68 00:03:53,400 --> 00:04:00,150 The shipping argument refers to the cost of shipping inside the function, where logging the two arguments 69 00:04:00,150 --> 00:04:06,260 after they've been added together, the function should log a number below the function definition. 70 00:04:06,270 --> 00:04:09,600 We're calling this function with the numbers 10 and five. 71 00:04:09,930 --> 00:04:13,050 Let's try running this script and the command line. 72 00:04:13,320 --> 00:04:15,720 I'll run the script with the following command. 73 00:04:17,890 --> 00:04:21,519 As expected, we got 15 perfect, right? 74 00:04:21,970 --> 00:04:27,790 Why don't we pass in a string instead of a no back in our file all wrapped the first number with some 75 00:04:27,790 --> 00:04:28,330 quotes? 76 00:04:30,820 --> 00:04:33,100 Next hour, rerun the script. 77 00:04:35,520 --> 00:04:38,070 This time we got one hundred and five. 78 00:04:38,340 --> 00:04:41,910 If I were a customer, I'd be turned off by this calculation. 79 00:04:42,240 --> 00:04:45,600 This type of error occurred because of how we've written our code. 80 00:04:46,020 --> 00:04:49,800 We passed in a string when we meant to pass in a number. 81 00:04:50,250 --> 00:04:53,250 TypeScript is designed to catch errors like these. 82 00:04:53,520 --> 00:04:56,850 It's a language that can check the data types of our variables. 83 00:04:57,090 --> 00:04:59,790 It's much stricter than JavaScript, but worth it. 84 00:04:59,790 --> 00:05:04,680 In the end, we can improve the developer experience by switching to TypeScript. 85 00:05:05,010 --> 00:05:07,910 Let's dive into TypeScript in the next lecture.