1 00:00:00,000 --> 00:00:04,925 [MUSIC] 2 00:00:04,925 --> 00:00:09,260 Welcome to the second section of this TypeScript basics course. 3 00:00:09,260 --> 00:00:13,495 In this section we're going to focus more on types, specifically, 4 00:00:13,495 --> 00:00:16,270 more on basic and utility types. 5 00:00:16,270 --> 00:00:19,940 In this video, we're going to talk about the array and tuple types. 6 00:00:19,940 --> 00:00:24,678 In the last video of the previous section, the basic types that we went through for 7 00:00:24,678 --> 00:00:27,950 TypeScript match the ones for JavaScript. 8 00:00:27,950 --> 00:00:32,666 But in this video, we're going to talk about types that actually don't 9 00:00:32,666 --> 00:00:35,540 match what exists in JavaScript. 10 00:00:35,540 --> 00:00:37,880 And that's an array and a tuple. 11 00:00:37,880 --> 00:00:43,128 Now I know it's totally possible to write an array or a tuple in JavaScript, 12 00:00:43,128 --> 00:00:48,450 but fun fact, there isn't actually a type of them in JavaScript. 13 00:00:48,450 --> 00:00:53,020 And before I continue, if you don't know what a tuple is, don't worry. 14 00:00:53,020 --> 00:00:55,090 I'll explain it in this video. 15 00:00:55,090 --> 00:01:00,060 If you want to follow along, I'm going to be using the projects folder provided in 16 00:01:00,060 --> 00:01:04,110 this course, you can download it in the download sections below. 17 00:01:05,470 --> 00:01:11,254 We're going to be working from a file called 1-basic-types-begin and 18 00:01:11,254 --> 00:01:15,360 that is in the working with types folder. 19 00:01:15,360 --> 00:01:16,820 I'll show you here. 20 00:01:16,820 --> 00:01:19,710 I'm going to open the left file Explorer, 21 00:01:19,710 --> 00:01:25,024 open the working with types folder and open the basic-types-begin folder. 22 00:01:25,024 --> 00:01:30,657 It should be empty, but you'll notice that there is a basic-types-end folder, 23 00:01:30,657 --> 00:01:35,020 which should have the final completed code inside it. 24 00:01:35,020 --> 00:01:37,726 Feel free to look at it if you get stuck or 25 00:01:37,726 --> 00:01:41,506 just want to see what we're going to end up writing. 26 00:01:41,506 --> 00:01:48,670 Let's create a file in the -begin folder called basic-types.ts. 27 00:01:48,670 --> 00:01:53,698 Now I want this file and all the files that we're going to write for 28 00:01:53,698 --> 00:01:58,455 this project to have the exact same TypeScript configuration 29 00:01:58,455 --> 00:02:02,170 as the one in a folder we created earlier. 30 00:02:02,170 --> 00:02:06,780 So I'm going to get that configuration and put it in the root of this project. 31 00:02:06,780 --> 00:02:13,135 Let's open the getting started folder and open the 3-getting-started-begin folder, 32 00:02:13,135 --> 00:02:16,240 and we'll see there is a tsconfig file here. 33 00:02:17,240 --> 00:02:21,727 We're going to click on it and drag it all the way to the bottom of this project 34 00:02:21,727 --> 00:02:25,640 underneath the 4-functions-in-ts folder. 35 00:02:25,640 --> 00:02:30,892 Let's actually open it up and comment out line 72 isolated modules, 36 00:02:30,892 --> 00:02:36,050 just so that we don't have to keep creating modules in our files. 37 00:02:36,050 --> 00:02:41,280 We can save by pressing command s and close this file by pressing command w. 38 00:02:41,280 --> 00:02:46,960 Now let's do the exact same thing with our package.json file in the same folder. 39 00:02:46,960 --> 00:02:48,990 We're going to click on it and 40 00:02:48,990 --> 00:02:53,740 drag it all the way to the bottom beneath our tsconfig.json. 41 00:02:53,740 --> 00:02:57,777 Now it should go above the file because all the files in this 42 00:02:57,777 --> 00:03:01,030 folder are ordered alphabetically. 43 00:03:01,030 --> 00:03:06,480 Let's click on that package.json file and get rid of line 12 which is type module. 44 00:03:07,670 --> 00:03:12,550 The reason we're doing this is so that we don't have to specify es modules in 45 00:03:12,550 --> 00:03:17,223 this file, because we're going to use a plugin that will do that for us. 46 00:03:17,223 --> 00:03:20,187 Let's close this file by pressing command w and 47 00:03:20,187 --> 00:03:23,235 we're going to install a plugin called tsnode. 48 00:03:23,235 --> 00:03:27,656 Now, up until this point, we've been compiling our TypeScript code to 49 00:03:27,656 --> 00:03:32,870 JavaScript, and then running our JavaScript code separately with node js. 50 00:03:32,870 --> 00:03:36,841 But with ts node, we can run our TypeScript files directly 51 00:03:36,841 --> 00:03:40,988 in the terminal without converting it to JavaScript first. 52 00:03:40,988 --> 00:03:45,758 Let's open up our terminal by going to view and pressing terminal, 53 00:03:45,758 --> 00:03:49,870 now we need to make sure we're in the root of this project. 54 00:03:49,870 --> 00:03:53,861 So I'm going to go up the folder tree by changing directory and 55 00:03:53,861 --> 00:03:56,660 pressing two periods or four stops. 56 00:03:56,660 --> 00:04:00,060 We'll do that again by pressing up on the keyboard and enter and 57 00:04:00,060 --> 00:04:02,513 one more time by pressing up and enter again. 58 00:04:02,513 --> 00:04:07,217 If I press ls to list all the files inside this directory, 59 00:04:07,217 --> 00:04:12,710 we'll see that our package.json and our tsconfig is in the root. 60 00:04:12,710 --> 00:04:17,630 So we're now able to install a package in this project. 61 00:04:17,630 --> 00:04:25,120 Let's type npm install -g to install globally and ts-node. 62 00:04:25,120 --> 00:04:28,463 Hopefully, you've had no issues with this installation and 63 00:04:28,463 --> 00:04:31,800 you now should have ts-node on your machine. 64 00:04:31,800 --> 00:04:36,058 Let's close the left file explorer as well as our terminal. 65 00:04:36,058 --> 00:04:39,483 Now let's create a variable called numbers and 66 00:04:39,483 --> 00:04:42,649 we're going to give this a type of number but 67 00:04:42,649 --> 00:04:49,330 we're going to put two square brackets after it to signify that it's an array. 68 00:04:49,330 --> 00:04:53,591 On a new line, let's give this number variable an array with numbers inside it. 69 00:04:56,724 --> 00:05:01,110 And just like that, you've created your first array in TypeScript. 70 00:05:01,110 --> 00:05:03,265 This array can only have numbers, 71 00:05:03,265 --> 00:05:06,770 because that is what we specified in the type on line 1. 72 00:05:06,770 --> 00:05:10,717 If we change this value 5 into a string, we get an error, 73 00:05:10,717 --> 00:05:14,970 because we can't put a string in an array of numbers. 74 00:05:14,970 --> 00:05:19,170 If we change this to a Boolean, we'll also get an error for the same reasons. 75 00:05:20,200 --> 00:05:24,252 Remember earlier when I said that JavaScript doesn't actually have an array 76 00:05:24,252 --> 00:05:26,520 type, let me prove that now. 77 00:05:26,520 --> 00:05:29,976 Let's change this true back to the number 5, and on a new line, 78 00:05:29,976 --> 00:05:32,858 let's console log the type of the numbers variable. 79 00:05:35,730 --> 00:05:39,059 To run this file, we're going to open up our terminal by going to view and 80 00:05:39,059 --> 00:05:42,870 terminal, and we need to make sure we're in the right directory. 81 00:05:42,870 --> 00:05:48,126 We need to go into our project-files first, go into 2-working-with types, 82 00:05:48,126 --> 00:05:51,077 and then go into 1-basic-types-begin. 83 00:05:53,180 --> 00:05:58,614 Now let's write to ts-node, basic-types.ts. 84 00:05:58,614 --> 00:06:06,170 And you'll see the console log on line 5 is actually a type of object. 85 00:06:06,170 --> 00:06:09,909 That's because JavaScript treats arrays as objects. 86 00:06:09,909 --> 00:06:15,710 So one great thing about TypeScript is that we can check array types. 87 00:06:15,710 --> 00:06:18,540 Let's also create an array of strings. 88 00:06:18,540 --> 00:06:22,490 Let's comment out this line here by pressing Command question mark 89 00:06:22,490 --> 00:06:27,608 if you have VS code, and we're going to make a new variable called strings and 90 00:06:27,608 --> 00:06:29,912 give back a type of a string array. 91 00:06:29,912 --> 00:06:33,928 Let's close the terminal for now, and before I continue, 92 00:06:33,928 --> 00:06:37,860 the array type can actually be written in two ways. 93 00:06:37,860 --> 00:06:42,742 It can be written in the way I've just shown by writing the type, so number or 94 00:06:42,742 --> 00:06:47,720 string with square brackets, or we can write the array word with a capital A. 95 00:06:49,410 --> 00:06:51,311 And use greater than and 96 00:06:51,311 --> 00:06:57,490 less than signs to encapsulate the type we want to be in the array. 97 00:06:57,490 --> 00:07:02,478 We'll talk more about this angle bracket sort of type later in the course, but 98 00:07:02,478 --> 00:07:07,331 for now we're going to stick with the square bracket way of writing arrays. 99 00:07:09,134 --> 00:07:14,132 We can give the strings variable, a value of an array of strings. 100 00:07:19,074 --> 00:07:24,650 Again, you can't put a number in this array because it only expects strings, 101 00:07:24,650 --> 00:07:28,210 and you can't put a Boolean in this array as well. 102 00:07:30,290 --> 00:07:32,496 Let's give this a value of three as a string and 103 00:07:32,496 --> 00:07:34,860 we'll move on to talk about tuples. 104 00:07:34,860 --> 00:07:40,440 Now, as you've noticed, an array only allows you to have one type inside of it. 105 00:07:40,440 --> 00:07:45,022 But let's say you wanted an array with a mixture of types, like a number and 106 00:07:45,022 --> 00:07:48,180 a string, or maybe a Boolean as well. 107 00:07:48,180 --> 00:07:49,990 This is where tuples come in. 108 00:07:49,990 --> 00:07:52,205 The difference between a tuple and 109 00:07:52,205 --> 00:07:57,410 an array is that a tuple is like an array that can have different types. 110 00:07:57,410 --> 00:08:01,266 However, a tuple also has a set number of items, 111 00:08:01,266 --> 00:08:05,320 whereas an array can have as many items as you want. 112 00:08:06,690 --> 00:08:08,560 Let me show you what I mean. 113 00:08:08,560 --> 00:08:12,050 Let's create a variable called coord short for coordinates. 114 00:08:13,820 --> 00:08:18,970 And this will have a type of number, but it will be inside our square brackets. 115 00:08:20,720 --> 00:08:24,410 We're going to give it another type also of number. 116 00:08:24,410 --> 00:08:26,215 We'll separate these types with a comma. 117 00:08:28,419 --> 00:08:32,086 What this means is that our coordinate variable is 118 00:08:32,086 --> 00:08:36,330 an array that can only have two numbers inside of it. 119 00:08:36,330 --> 00:08:40,985 So if we gave our coordinate variable a value of 0, 0, that should be fine. 120 00:08:43,449 --> 00:08:48,418 But if we added one more zero, we get a type error from TypeScript 121 00:08:48,418 --> 00:08:53,299 because our type only contains two values, number, number, 122 00:08:53,299 --> 00:08:57,820 not three values of number, number, number. 123 00:08:57,820 --> 00:09:02,310 Of course, the zero can't be a string, or it can't be a Boolean. 124 00:09:04,290 --> 00:09:05,040 It has to be a number. 125 00:09:06,800 --> 00:09:10,150 Let's create another tuple with mixed types. 126 00:09:10,150 --> 00:09:13,460 We're going to create a variable called mixedTypes. 127 00:09:13,460 --> 00:09:15,260 I know it's not very original, but 128 00:09:15,260 --> 00:09:18,630 sometimes it's difficult to come up with unique variable names. 129 00:09:21,120 --> 00:09:24,209 And this can have a type of number, string and Boolean. 130 00:09:28,401 --> 00:09:34,163 So now this mixed type tuple contains three values, one number, one string and 131 00:09:34,163 --> 00:09:39,582 Boolean, and we have to obey this rule or TypeScript will give us an error. 132 00:09:44,483 --> 00:09:49,347 Just like this, as you can see the code we've written on line 17 satisfies 133 00:09:49,347 --> 00:09:51,860 the requirements that we set earlier. 134 00:09:53,110 --> 00:09:58,911 Let's try something cool, let's change our coordinate type above from a number, 135 00:09:58,911 --> 00:10:00,910 number to a number string. 136 00:10:00,910 --> 00:10:05,729 Now let's change the second value in our coordinate variable 137 00:10:05,729 --> 00:10:09,910 on line 13 to a string of 0 instead of a number of 1. 138 00:10:11,730 --> 00:10:18,137 Now on line 17, let's remove the value of 1 and the string of 2 inside our array, 139 00:10:18,137 --> 00:10:22,751 and let's use the spread operator to replace those values. 140 00:10:25,874 --> 00:10:27,350 This is really cool. 141 00:10:27,350 --> 00:10:32,368 The types are still satisfied, even after we use the spread operator 142 00:10:32,368 --> 00:10:36,969 to open up our coordinates tuple inside our mixed types tuple. 143 00:10:36,969 --> 00:10:41,064 If we change the coordinate type back to a number, 144 00:10:41,064 --> 00:10:47,902 number instead of a number string, we should get errors in both line 13 and 17. 145 00:10:50,642 --> 00:10:53,241 Just as we expected. 146 00:10:53,241 --> 00:10:57,735 Okay, we'll stop here for now and in our next video we'll talk about 147 00:10:57,735 --> 00:11:01,470 a few more basic types before moving on to utility types.