1 00:00:01,010 --> 00:00:04,700 In this video we're going to write out just a little bit of code to get a better idea of what's going 2 00:00:04,700 --> 00:00:05,960 on with these types. 3 00:00:05,960 --> 00:00:09,650 Now this first little bit of code that we're going to write around types is going to be really simple 4 00:00:09,650 --> 00:00:14,240 and straightforward just to kind of hammer home some of the concepts we've been talking about but on 5 00:00:14,240 --> 00:00:18,230 some of the other examples or other topics we're going to discuss very shortly we're going to write 6 00:00:18,230 --> 00:00:20,280 out much more complete code snippets. 7 00:00:20,360 --> 00:00:26,040 So anyways let's get started going to begin by flipping on over to my code editor I'm still inside of 8 00:00:26,040 --> 00:00:28,030 my fetch Jason directory. 9 00:00:28,210 --> 00:00:32,770 I'm going to change out into my workspace folder and then inside of here I'm going to make a new project 10 00:00:32,770 --> 00:00:36,880 directory to hold all these different code snippets we're going to put together as we're going through 11 00:00:36,880 --> 00:00:39,240 some basic features of typescript. 12 00:00:39,250 --> 00:00:45,920 So I'm going to make a new directory here called features I'll then change into that directory and then 13 00:00:45,920 --> 00:00:52,780 I'll open up my code editor inside their once my editor is open and then going to make a new file and 14 00:00:52,780 --> 00:00:54,690 I'm just gonna call it Type start to yes. 15 00:00:54,730 --> 00:00:59,230 So like I said I just want to write out one or two quick snippets of code just to get a better idea 16 00:00:59,230 --> 00:01:05,620 of what's going on so I want you to remember that the entire idea behind this type system is that it 17 00:01:05,620 --> 00:01:11,140 is an easy way for us to refer to the different properties and functions that a value has. 18 00:01:11,140 --> 00:01:16,740 In addition every value everything that we can assign to a variable has a type. 19 00:01:16,810 --> 00:01:21,580 So to get started I'm going to flip back over my code editor and I want to just try creating a variable 20 00:01:21,610 --> 00:01:24,540 that's going to point to an instance of a data object. 21 00:01:25,060 --> 00:01:28,240 So I'll say Conte's today is going to be new date. 22 00:01:28,330 --> 00:01:35,880 Like so if I hover over that variable my editor will then tell me the type of value that this variable 23 00:01:35,880 --> 00:01:36,930 is pointing at. 24 00:01:36,930 --> 00:01:43,530 So this is saying that the today variable is pointing at an object of type date typescript can now use 25 00:01:43,530 --> 00:01:48,080 that information to decide exactly what we can do with that variable. 26 00:01:48,090 --> 00:01:54,070 So for example if I put down today and then a dot I see my autocomplete pop up right here. 27 00:01:54,300 --> 00:02:00,650 This is listing out all the different functions and properties that a date object has typescript only 28 00:02:00,650 --> 00:02:06,380 knows to show this information right here because it has an internal definition of exactly what a date 29 00:02:06,410 --> 00:02:07,300 is. 30 00:02:07,340 --> 00:02:10,910 In other words typescript knows the properties and methods that a date has. 31 00:02:10,910 --> 00:02:17,230 So can print them up in this list right here and I can easily select one and call it like so and then 32 00:02:17,230 --> 00:02:21,880 as we saw just a moment ago because typescript knows what methods a date has and what properties it 33 00:02:21,880 --> 00:02:27,200 has if we tried to reference one that doesn't exist we will very quickly get an error message. 34 00:02:27,250 --> 00:02:28,990 So that's the whole point of types. 35 00:02:29,110 --> 00:02:34,930 It is a shortcut to say here are the different properties and methods that this value right here has 36 00:02:36,660 --> 00:02:36,910 okay. 37 00:02:36,920 --> 00:02:42,170 So that's an example of looking at the type that a date object brings up let's now try creating and 38 00:02:42,200 --> 00:02:48,410 a plain javascript object it's all say something like const person is going to be an object like so 39 00:02:48,790 --> 00:02:54,250 and I'll give this person how about like just an age of 20 if I now hover over that person variable 40 00:02:54,850 --> 00:02:59,460 I'll see a person or council person excuse me and then right after that. 41 00:02:59,590 --> 00:03:05,380 In this case I don't get a nice name for the type because I've not actually given this object right 42 00:03:05,380 --> 00:03:12,840 here a name is shorten name so we can kind of see our definition that of a type kind of holds up here. 43 00:03:13,360 --> 00:03:19,000 If we don't have a shortened definition of what this object is then typescript is just going to default 44 00:03:19,030 --> 00:03:23,620 to printing out all the different properties and methods that the object has. 45 00:03:23,620 --> 00:03:29,890 So in this case it has just an age that is a number and once again if we tried to reference some property 46 00:03:29,950 --> 00:03:35,250 on that variable that doesn't actually exist we're going to get an error message. 47 00:03:35,490 --> 00:03:37,810 Okay just one more quick example here. 48 00:03:37,910 --> 00:03:43,680 So down here I'm going to try to create a class I'll call it color I'm not going to give it any implementation. 49 00:03:43,940 --> 00:03:48,500 Now even if you don't know what a class is that's really fine we're gonna go into great detail on classes 50 00:03:48,500 --> 00:03:53,560 later on I can now use this class to make a new instance of a color. 51 00:03:53,600 --> 00:04:01,430 So I'll say like say const red is new color like so and now just as we've seen twice before now by hover 52 00:04:01,430 --> 00:04:07,640 over red typescript knows that this variable is pointing at an object that is of type color that means 53 00:04:07,640 --> 00:04:12,860 that this variable right here has access to all the properties and all the methods that a color object 54 00:04:12,860 --> 00:04:18,680 has in this case none because we haven't actually implemented anything here and we can see that if we 55 00:04:18,680 --> 00:04:25,130 write out a red and then dot like so there are no properties associated with this class of color so 56 00:04:25,130 --> 00:04:27,150 we don't get any autocomplete whatsoever. 57 00:04:27,280 --> 00:04:33,450 If I try to reference anything as usual I'll get a very quick error message here as well okay. 58 00:04:33,630 --> 00:04:36,850 Such as a couple of quick example examples of types. 59 00:04:36,860 --> 00:04:38,270 So let's take a quick pause right here. 60 00:04:38,270 --> 00:04:43,670 We're going to wrap up this idea of types with a quick discussion really quick I promise on where we're 61 00:04:43,670 --> 00:04:46,170 going to use types in a normal project. 62 00:04:46,310 --> 00:04:46,940 So quick pauses. 63 00:04:46,940 --> 00:04:48,200 I'll see you in just a minute.