1 00:00:00,280 --> 00:00:05,065 Okay, so in the last video, we managed to create a TypeScript configuration 2 00:00:05,065 --> 00:00:10,360 file to compile our TypeScript file to a more modern version of JavaScript. 3 00:00:10,360 --> 00:00:13,213 In this video, we're going to go through some basic or 4 00:00:13,213 --> 00:00:15,440 primitive types in TypeScript. 5 00:00:15,440 --> 00:00:20,375 Now, in an earlier video, I mentioned JavaScript has seven basic types, 6 00:00:20,375 --> 00:00:22,426 including string and number. 7 00:00:22,426 --> 00:00:28,895 Well, the other five are null, undefined, boolean, symbol, and bigint. 8 00:00:28,895 --> 00:00:33,799 These exact same primitive types also exist in TypeScript, but for 9 00:00:33,799 --> 00:00:39,440 this course we're going to ignore the symbol and bigint data types. 10 00:00:39,440 --> 00:00:42,875 And for this video, we're going to focus on the boolean, 11 00:00:42,875 --> 00:00:46,450 string and number data type since these are the most commonly 12 00:00:46,450 --> 00:00:49,830 used data types you'll use in general code. 13 00:00:49,830 --> 00:00:53,264 Now, you're honestly welcome to just watch this video without writing 14 00:00:53,264 --> 00:00:54,700 any code yourself. 15 00:00:54,700 --> 00:00:56,718 But if you wanna follow along, 16 00:00:56,718 --> 00:01:01,380 I'll be working from the 4-basic-types-begin folder. 17 00:01:01,380 --> 00:01:03,170 I'll show you where that is here. 18 00:01:03,170 --> 00:01:06,360 So let me collapse this one and that is over here. 19 00:01:06,360 --> 00:01:11,174 You'll notice of course, there is a 4-basic-types-end video, and 20 00:01:11,174 --> 00:01:15,540 this is where the final code will go if you want to see that. 21 00:01:15,540 --> 00:01:17,270 But for now, we'll just work from here. 22 00:01:17,270 --> 00:01:21,615 Let's create a TypeScript file called, basic-types. 23 00:01:24,431 --> 00:01:27,494 Now, let's first focus on the boolean datatype. 24 00:01:27,494 --> 00:01:30,494 We'll create a variable called hasSuperPowers and 25 00:01:30,494 --> 00:01:32,000 give it a type of boolean. 26 00:01:33,140 --> 00:01:37,858 Let's collapse this left navigation panel and focus on the code. 27 00:01:41,164 --> 00:01:46,655 You've probably already figured this out from the last video but the colon and 28 00:01:46,655 --> 00:01:51,825 boolean after the hasSuperPowers variable refers to a type annotation. 29 00:01:51,825 --> 00:01:57,080 This is the way we tell TypeScript what type we want our variable to be. 30 00:01:57,080 --> 00:02:00,448 A boolean, I'd say is the most simple basic data type, 31 00:02:00,448 --> 00:02:04,040 because it can only have two values, either true or false. 32 00:02:06,720 --> 00:02:09,900 A quick tip for VS code uses on a Mac. 33 00:02:09,900 --> 00:02:14,146 If you want to duplicate the same line, you can press the Shift option and 34 00:02:14,146 --> 00:02:15,130 down arrow key. 35 00:02:16,220 --> 00:02:18,785 Let's change this true to false, and as you can see, 36 00:02:18,785 --> 00:02:21,490 we don't get any errors in TypeScript. 37 00:02:21,490 --> 00:02:25,841 However, if I assigned the value 0 to hasSuperPowers, or 38 00:02:25,841 --> 00:02:29,060 the value 1, you'll see both line five and 39 00:02:29,060 --> 00:02:34,910 six give me errors because number is not assignable to type boolean. 40 00:02:34,910 --> 00:02:40,355 Similarly, if we change our value 0 here to true as a string, 41 00:02:40,355 --> 00:02:43,495 or to false, we get the same error, 42 00:02:43,495 --> 00:02:48,864 because you cannot assign a string value to a boolean value. 43 00:02:48,864 --> 00:02:54,606 You can however, use the boolean function to convert a number or 44 00:02:54,606 --> 00:02:59,619 a string into a boolean, and that can be done like this. 45 00:03:02,403 --> 00:03:06,059 So this can be done with a string and also a number. 46 00:03:06,059 --> 00:03:11,794 Let's get rid of this last line here, duplicate line five, enter int 0 to 1. 47 00:03:11,794 --> 00:03:16,504 And you can see both of these will have a type of boolean. 48 00:03:16,504 --> 00:03:21,846 We can also use the double knot operator to convert a string or 49 00:03:21,846 --> 00:03:23,951 number into a boolean. 50 00:03:23,951 --> 00:03:25,790 Let me show you that now. 51 00:03:25,790 --> 00:03:29,528 I'm going to duplicate line six and remove this boolean, 52 00:03:29,528 --> 00:03:34,409 turn it into a string of true and put two exclamation marks in front of it, and 53 00:03:34,409 --> 00:03:37,360 this will convert it to a boolean. 54 00:03:37,360 --> 00:03:42,610 I can do the same with the value of false and that will work fine. 55 00:03:42,610 --> 00:03:47,280 Now, let's see if line eight outputs the boolean that I'd expect. 56 00:03:47,280 --> 00:03:51,297 We can do this by creating a consolelog of hasSuperPowers. 57 00:03:51,297 --> 00:03:55,570 I'll copy this and paste it inside the parentheses. 58 00:03:55,570 --> 00:03:59,506 And what we can do is open up our Terminal by going to View and Terminal, 59 00:03:59,506 --> 00:04:02,220 making sure we're in the right directory. 60 00:04:02,220 --> 00:04:06,900 We're not, so what you can do as a quick tip is to change directory and 61 00:04:06,900 --> 00:04:11,840 press, two periods or two full stops, to go into the parent directory. 62 00:04:13,100 --> 00:04:16,243 Which gets me into here, 1-getting-started, and 63 00:04:16,243 --> 00:04:19,740 now I can change directory into 4-basic-types-begin. 64 00:04:20,940 --> 00:04:26,700 Now, I could press tsc to compile this file from TypeScript to JavaScript. 65 00:04:26,700 --> 00:04:30,690 Now, before you press Enter, I'm going to show you another trick. 66 00:04:30,690 --> 00:04:36,130 You can write two commands in one line by using double ampersands. 67 00:04:36,130 --> 00:04:40,857 If I press && here and write node basic-types.js, 68 00:04:40,857 --> 00:04:48,360 what this is going to do is first compile our basic-typescript file into JavaScript, 69 00:04:48,360 --> 00:04:52,490 and then run that JavaScript file with node. 70 00:04:52,490 --> 00:04:55,220 Let's press the return key to see if that will work. 71 00:04:56,550 --> 00:05:00,160 Okay, looks like it didn't work and that's because I made a mistake. 72 00:05:00,160 --> 00:05:04,142 Because this folder doesn't have a TypeScript configuration file, 73 00:05:04,142 --> 00:05:07,770 we need to tell it the exact file we want to compile. 74 00:05:07,770 --> 00:05:10,401 Let's do that by going back to this line, 75 00:05:10,401 --> 00:05:15,420 you can press the up key on your keyboard to get the last command you typed. 76 00:05:15,420 --> 00:05:21,520 And what I'm going to do is write basic-types.ts and hit return. 77 00:05:21,520 --> 00:05:25,050 There we have it, we've got the value, true printed out. 78 00:05:25,050 --> 00:05:29,643 And that's because JavaScript on line eight is not converting 79 00:05:29,643 --> 00:05:32,940 the false string into a false boolean. 80 00:05:32,940 --> 00:05:36,740 It's actually checking if there is a value in the string. 81 00:05:36,740 --> 00:05:39,659 As long as there's a value in the string, no matter what it is, 82 00:05:39,659 --> 00:05:41,450 it will return, true. 83 00:05:41,450 --> 00:05:44,640 If the string itself is empty, it should be false. 84 00:05:45,770 --> 00:05:51,320 So the hasSuperPowers variable is doing a boolean conversion that we expect. 85 00:05:52,360 --> 00:05:55,080 Let's move on to the number data type. 86 00:05:55,080 --> 00:05:59,518 I'm going to close the terminal by pressing the cross on the right hand side 87 00:05:59,518 --> 00:06:02,265 and make some space between the consolelog and 88 00:06:02,265 --> 00:06:04,885 the next line of code we're going to write. 89 00:06:04,885 --> 00:06:08,493 In JavaScript, unlike other programming languages, 90 00:06:08,493 --> 00:06:13,520 there's no separation between integers or floating point numbers. 91 00:06:13,520 --> 00:06:17,952 Everything is a number, whether it's hexadecimal, or binary, 92 00:06:17,952 --> 00:06:21,669 they all fall under the same number data type which makes 93 00:06:21,669 --> 00:06:25,750 things a bit easier when it comes to TypeScript. 94 00:06:25,750 --> 00:06:28,653 Let's create a variable called heightInCM. 95 00:06:30,957 --> 00:06:37,026 And give it a type of number and a value of 188. 96 00:06:37,026 --> 00:06:43,118 Again, you might have figured out that based on the name of this type number, 97 00:06:43,118 --> 00:06:46,035 you can't assign it any other type. 98 00:06:46,035 --> 00:06:50,264 This number variable cannot be a boolean or a string. 99 00:06:50,264 --> 00:06:55,270 If I assign heightInCM to true, we'll get an error. 100 00:06:55,270 --> 00:07:00,400 And if I assign it to a string of a 188, we'll also get an error. 101 00:07:01,580 --> 00:07:07,185 However, what we can do is use the number object to convert a string or 102 00:07:07,185 --> 00:07:09,750 boolean into a number. 103 00:07:09,750 --> 00:07:10,500 Let me show you that now. 104 00:07:11,670 --> 00:07:16,101 If I put the number function in capital N in front of true and 105 00:07:16,101 --> 00:07:23,070 wrap the true value in parentheses, you'll see that will convert it into a number. 106 00:07:23,070 --> 00:07:24,580 Again, I can do the same with the string. 107 00:07:26,780 --> 00:07:29,902 And this will get rid of the error that TypeScript was giving us. 108 00:07:29,902 --> 00:07:34,165 But we can also use the plus unary operator to convert a string or 109 00:07:34,165 --> 00:07:35,783 boolean into a number. 110 00:07:35,783 --> 00:07:39,894 Let's duplicate line 15 and put a plus symbol in front of it. 111 00:07:39,894 --> 00:07:41,510 And that will give the same result. 112 00:07:42,620 --> 00:07:47,911 We can change 188 to true, and you'll see we don't get any errors from TypeScript. 113 00:07:47,911 --> 00:07:51,913 Let's actually comment out this consolelog and 114 00:07:51,913 --> 00:07:55,920 use this to consolelog the value of heightInCM. 115 00:07:57,730 --> 00:08:02,820 Let's open up our terminal and see what we get when we convert true into a number. 116 00:08:02,820 --> 00:08:05,270 I'm going to press up on my keyboard and hit Enter. 117 00:08:06,320 --> 00:08:10,820 Because a boolean can only be 0 or 1, if we change true on line 17 to false, 118 00:08:10,820 --> 00:08:12,430 we should get a value of 0. 119 00:08:15,400 --> 00:08:17,050 Just as we expected. 120 00:08:17,050 --> 00:08:22,380 Let's close our terminal again, and focus on the next data type, strings. 121 00:08:22,380 --> 00:08:25,664 Let's make some space between this last console.log and 122 00:08:25,664 --> 00:08:28,355 let's create a variable with a type of string. 123 00:08:28,355 --> 00:08:30,640 We're going to call this variable hero. 124 00:08:33,530 --> 00:08:38,127 Again, you may have figured out that you can't assign a value of number or 125 00:08:38,127 --> 00:08:41,940 boolean to a string, you can only assign a string. 126 00:08:41,940 --> 00:08:46,726 So we'll give this hero a value of Batman as a string, and 127 00:08:46,726 --> 00:08:50,830 we don't get any errors from TypeScript. 128 00:08:50,830 --> 00:08:56,630 However, if we gave hero a value of 122, we get an error. 129 00:08:56,630 --> 00:09:02,370 And if we give hero a value of true, which is a boolean, we also get an error. 130 00:09:02,370 --> 00:09:05,873 However, and you might have seen this coming, 131 00:09:05,873 --> 00:09:11,226 you can convert a number or boolean to a string with the string function. 132 00:09:11,226 --> 00:09:13,380 Let's do that now. 133 00:09:13,380 --> 00:09:19,980 I'm going to change 122 to a string with parentheses of 122 and that's all fine. 134 00:09:19,980 --> 00:09:22,990 We can do the same with this boolean of true. 135 00:09:22,990 --> 00:09:26,437 And again, we don't get any errors from TypeScript. 136 00:09:26,437 --> 00:09:28,118 In the case of a number, 137 00:09:28,118 --> 00:09:33,174 I believe we can use the toString method to convert a number to a string. 138 00:09:33,174 --> 00:09:34,858 Let me show you that now. 139 00:09:34,858 --> 00:09:39,045 I'm going to give our hero variable a value of 122 and 140 00:09:39,045 --> 00:09:41,373 use the toString method on it. 141 00:09:41,373 --> 00:09:45,472 To make this a bit cleaner, we can put our number inside parentheses and 142 00:09:45,472 --> 00:09:47,110 that should work fine. 143 00:09:47,110 --> 00:09:50,804 Finally, let's scrap our console.log on line 19, 144 00:09:50,804 --> 00:09:53,170 delete that line and paste it here. 145 00:09:54,530 --> 00:10:00,870 Put our hero inside the console.log and get our terminal up again. 146 00:10:00,870 --> 00:10:06,486 I'm going to press up on the keyboard, hit Enter, and we get 122 as a string. 147 00:10:06,486 --> 00:10:10,295 Okay, that's pretty much how the boolean number and 148 00:10:10,295 --> 00:10:13,095 string data types work in TypeScript. 149 00:10:13,095 --> 00:10:16,349 If you're still a bit unsure about them, don't worry. 150 00:10:16,349 --> 00:10:20,331 We're going to use them a few more times throughout this course. 151 00:10:20,331 --> 00:10:26,700 Okay, and that actually marks the first section of the TypeScript course done. 152 00:10:26,700 --> 00:10:30,717 We've learned about what TypeScript is, why you'd use it, 153 00:10:30,717 --> 00:10:35,500 how to set it up and configure a TypeScript configuration file. 154 00:10:35,500 --> 00:10:39,040 And we've just gone through a few basic types. 155 00:10:39,040 --> 00:10:43,042 In the next section, we're going to go through some more basic types, 156 00:10:43,042 --> 00:10:45,043 go through some utility types, and 157 00:10:45,043 --> 00:10:49,240 talk about how you can create your own custom type from scratch. 158 00:10:49,240 --> 00:10:53,773 If that sounds confusing, the parts about making your own custom type, don't worry, 159 00:10:53,773 --> 00:10:56,650 I'm going to show you how to go through it step by step and 160 00:10:56,650 --> 00:10:58,999 it's actually much simpler than it sounds. 161 00:10:58,999 --> 00:11:01,910 Anyway, I hope you found this section useful and 162 00:11:01,910 --> 00:11:03,970 I will see you in the next section.