1 00:00:00,870 --> 00:00:05,190 Whenever you and I write typescript code we're going to rely upon type inference quite heavily. 2 00:00:05,190 --> 00:00:08,880 This is where typescript is going to figure out the different types that are flowing around our application 3 00:00:08,940 --> 00:00:10,260 for us. 4 00:00:10,260 --> 00:00:13,800 However there are three different scenarios that we're going to look at where we're going to have to 5 00:00:13,800 --> 00:00:19,260 add and type annotations manually instead remember these type annotations are going to help typescript 6 00:00:19,260 --> 00:00:24,420 along the first example we're going to look at is whenever we have a function that returns the any type 7 00:00:24,480 --> 00:00:28,770 and we need to clarify it and we haven't really discussed the any type just yet so we're gonna write 8 00:00:28,770 --> 00:00:30,330 out first just a little bit of code. 9 00:00:30,450 --> 00:00:35,220 Then we'll review what the any type really means and we'll get a better idea of why we need to use a 10 00:00:35,220 --> 00:00:35,990 type annotation. 11 00:00:36,000 --> 00:00:37,000 In this case. 12 00:00:36,990 --> 00:00:38,280 So let's get to it. 13 00:00:38,360 --> 00:00:42,660 I'm gonna flip back over to my code editor and then I'm going to go down to the very bottom of the file 14 00:00:43,230 --> 00:00:47,550 down here we're going to add in are three different examples on type annotations so I can put in a little 15 00:00:47,550 --> 00:00:57,260 comment that says when you use annotations so Case Number one is when we have a function that returns 16 00:00:58,650 --> 00:01:01,410 the any type okay. 17 00:01:01,410 --> 00:01:06,810 So for this example I want to define a little snippet of Jason as a string number just going to try 18 00:01:06,810 --> 00:01:08,820 to pass that Jason. 19 00:01:08,820 --> 00:01:14,610 So I'm going to define a new variable called lowercase Jason and I'm going to assign it a Jason string 20 00:01:14,950 --> 00:01:19,650 so I'll put down a string and an inside of here we're gonna write out just a little bit of Jason so 21 00:01:19,650 --> 00:01:27,690 I'll say curly brace I'll put down X in double quotes a colon and then 10 then y in double quotes a 22 00:01:27,690 --> 00:01:32,770 colon and 20 and then I'll close off the curly brace like so. 23 00:01:32,800 --> 00:01:38,810 So now I could use that string with the Jason pass function and turn the string into an actual object. 24 00:01:39,090 --> 00:01:44,960 So I'm going to create a new variable called about coordinates and I'll assign it the result of Jason 25 00:01:45,240 --> 00:01:48,180 that pass with that Jason variable. 26 00:01:48,320 --> 00:01:54,170 So in theory if we now round this code and console logged out coordinates we would see something like 27 00:01:55,010 --> 00:01:57,750 X is 10 and Y is 20. 28 00:01:57,800 --> 00:02:02,570 Like so now there's just one little gotcha inside of here. 29 00:02:02,660 --> 00:02:06,910 If you mouse over a coordinates you'll notice that it has a type annotation of any. 30 00:02:06,920 --> 00:02:12,170 So this means that typescript thinks that coordinates is of type any. 31 00:02:12,210 --> 00:02:16,890 In addition if we mouse over pass right here you'll notice a lot of nasty syntax up here but at the 32 00:02:16,890 --> 00:02:19,770 very end of it is something that says colon any. 33 00:02:19,770 --> 00:02:25,720 That means that the Jason parts function returns the any type so clearly this anything is something 34 00:02:25,720 --> 00:02:26,570 pretty important. 35 00:02:26,590 --> 00:02:32,200 Let's have a quick pause a little aside here and discuss what the any type means and then we'll understand 36 00:02:32,230 --> 00:02:37,150 based on that discussion why we would need to add in a type annotation here even though it looks like 37 00:02:37,180 --> 00:02:40,000 there's no errors or warnings with our code. 38 00:02:40,210 --> 00:02:40,420 All right. 39 00:02:40,420 --> 00:02:42,280 So quick aside here. 40 00:02:42,280 --> 00:02:47,560 So the first thing I want to review is how do adjacent parts function works in this diagram. 41 00:02:47,560 --> 00:02:51,760 I've got some different values on the left hand side and we're going to imagine that we feed each of 42 00:02:51,760 --> 00:02:56,890 these different values into Jason pass and we'll take a guess at what the different types are that will 43 00:02:56,890 --> 00:02:58,610 come out of the function. 44 00:02:58,630 --> 00:03:01,350 Now in reality this diagram is just a little bit misleading right here. 45 00:03:01,350 --> 00:03:07,220 In reality any time we call Jason not pass we get back a value of the any type. 46 00:03:07,270 --> 00:03:08,940 So this column over here on the right hand side. 47 00:03:08,980 --> 00:03:12,130 I'm just saying this is what the like. 48 00:03:12,310 --> 00:03:13,570 Maybe the type would be right. 49 00:03:13,570 --> 00:03:17,520 This is like we know that the type of false ones we pass it would be a boolean. 50 00:03:17,530 --> 00:03:19,060 That's not what we get with typescript. 51 00:03:19,060 --> 00:03:25,080 This is just like the ideal world so if we fed in a string of false to Jason not pass we get back a 52 00:03:25,080 --> 00:03:25,660 boolean. 53 00:03:25,860 --> 00:03:30,030 Again that's not what really happens we get back any but hey we're just saying we get back a billion 54 00:03:30,870 --> 00:03:35,220 if we pass in a string of four we would get back a number if we pass in something that looks like an 55 00:03:35,250 --> 00:03:41,640 object with value and then five we would get back a type that is an object with value that is a number. 56 00:03:41,640 --> 00:03:46,830 And likewise if we have a object with name that is pointing out a string we would get back an object 57 00:03:46,890 --> 00:03:51,690 with a name property that is a string and you can see each these examples very easily if you open up 58 00:03:51,690 --> 00:03:57,420 a javascript console really quickly and you call say Jason dot pass with a string of like five we get 59 00:03:57,420 --> 00:03:58,330 back a number right. 60 00:03:58,350 --> 00:03:59,790 Makes sense. 61 00:03:59,790 --> 00:04:06,390 Now the kind of common theme here is that we can clearly pass in very different strings into this function 62 00:04:06,900 --> 00:04:13,140 and we can possibly get back very very different value types in some cases we might get a billion. 63 00:04:13,290 --> 00:04:14,950 In other cases we might get a number. 64 00:04:15,060 --> 00:04:20,310 And then in some other cases we might get these really complicated objects so the goal of this diagram 65 00:04:20,310 --> 00:04:25,740 right here is just to help you understand that anytime we call Jason dot pass we get back possibly some 66 00:04:25,740 --> 00:04:28,730 very very different value types. 67 00:04:28,730 --> 00:04:34,050 Now the problem here is that typescript can not predict these different types typescript doesn't know 68 00:04:34,290 --> 00:04:39,420 what we're going to get out of Jason dot pass because it depends entirely on the string that we put 69 00:04:39,480 --> 00:04:45,140 into that function so when you and I are writing code inside of our code editor and we call Jason dot 70 00:04:45,140 --> 00:04:52,070 pass typescript just plain can't predict what we get back from the function because it will be entirely 71 00:04:52,070 --> 00:04:57,800 different based upon the string that we put in and typescript is not going to try to like read the string 72 00:04:57,800 --> 00:05:01,730 and figure out what it would return if we called Jason dot pass. 73 00:05:01,730 --> 00:05:08,030 So as a shortcut type script instead decides to simply say you know what I can't guess all these different 74 00:05:08,030 --> 00:05:09,580 types that's too complicated. 75 00:05:09,770 --> 00:05:15,200 So I'm going to say if you ever call Jason dot pass you're going to get back something called the any 76 00:05:15,260 --> 00:05:23,250 type the any type essentially means that typescript has no idea what type of value is being returned 77 00:05:23,250 --> 00:05:26,150 from Jason that pass has no clue at all. 78 00:05:26,700 --> 00:05:28,050 And that's what we see inside of our code. 79 00:05:28,050 --> 00:05:33,760 Ed so right here when we mouse over coordinates typescript is saying this is the any type. 80 00:05:33,760 --> 00:05:41,940 That means that typescript has no idea what type coordinates is so that's what the any type indicates. 81 00:05:41,940 --> 00:05:48,590 Now a couple more notes here on the any type so any is a type just as string or boolean are. 82 00:05:48,670 --> 00:05:53,470 Any time we have to write out a type of a variable like for example in a type annotation we could in 83 00:05:53,470 --> 00:05:58,980 theory put in any just as easily anytime we see something that is marked with the any type that means 84 00:05:58,980 --> 00:06:01,230 that typescript has no idea what's going on. 85 00:06:01,250 --> 00:06:05,730 And in general that is a very bad thing to have inside of application. 86 00:06:05,730 --> 00:06:10,820 Remember the entire idea behind TypeScript and all these types and all this kind of stuff is that we're 87 00:06:10,830 --> 00:06:17,280 using typescript to catch errors inside of our code Ed and we're able to do that because of these types 88 00:06:17,430 --> 00:06:20,800 like types like string and number and boolean and whatnot. 89 00:06:20,820 --> 00:06:25,800 If typescript knows the different types inside of application it can take a look at any time we say 90 00:06:25,800 --> 00:06:30,840 call a function on an object or reference a property on an object and type again can figure out whether 91 00:06:30,840 --> 00:06:36,140 or not we are referencing a property that actually exists or if it's one that we just made a typo on. 92 00:06:36,150 --> 00:06:41,940 So anytime we have a value that is the any type typescript can not do any error checking whatsoever 93 00:06:42,060 --> 00:06:44,100 around that value. 94 00:06:44,100 --> 00:06:51,160 So for example right now if I go back over to my code editor I can write out coordinates dot blah blah 95 00:06:51,160 --> 00:06:56,440 blah blah blah like so this is clearly a property that does not exist but you'll see that typescript 96 00:06:56,440 --> 00:07:01,030 does nothing to help me out and tell me that I might have a mistake right here. 97 00:07:01,060 --> 00:07:05,740 However if I go back up to any of these other examples where I'm working with variables that have known 98 00:07:05,740 --> 00:07:12,070 type like let's say how about speed right here if I reference speed dot blah blah blah typescript is 99 00:07:12,070 --> 00:07:17,290 going to jump in very quickly and say hey that's not a property that exists it's only going to allow 100 00:07:17,290 --> 00:07:22,580 me to call properties that actually exists like let's say two upper case like so that's fine. 101 00:07:22,720 --> 00:07:26,400 And it's only fine because typescript knows that speed is a string. 102 00:07:26,430 --> 00:07:32,490 So again anytime we have a variable of type any it is generally a bad thing because typescript can't 103 00:07:32,550 --> 00:07:34,790 do its job. 104 00:07:34,810 --> 00:07:35,460 All right. 105 00:07:35,500 --> 00:07:37,390 So I think that we've gone into enough detail on this. 106 00:07:37,390 --> 00:07:38,170 Any type. 107 00:07:38,200 --> 00:07:39,580 So let's have another quick pause right here. 108 00:07:39,580 --> 00:07:44,050 We're going to come back the next video and understand how we can use a type annotation to fix this 109 00:07:44,050 --> 00:07:47,020 thing up right here so quick pause and I'll see you in just a minute.