1 00:00:02,240 --> 00:00:02,580 All right. 2 00:00:02,600 --> 00:00:05,900 This video is where things are going to get just a little bit nasty because we're gonna have to write 3 00:00:05,900 --> 00:00:10,850 out a little bit of crazy typescript code the syntax is gonna be a little bit weird but I'm pretty sure 4 00:00:10,850 --> 00:00:14,260 that once you see it all in action it's gonna make a lot of sense. 5 00:00:14,270 --> 00:00:19,910 So our goal here is to somehow get typescript to understand that it needs to make sure the subject we 6 00:00:19,910 --> 00:00:23,910 have listed right here matches up with the type of data that we provide. 7 00:00:23,930 --> 00:00:25,070 Right there. 8 00:00:25,070 --> 00:00:26,450 So how are we gonna do this. 9 00:00:26,450 --> 00:00:32,620 Well we're going to go back over to our base listener file and cyberspace listener at the very top. 10 00:00:32,630 --> 00:00:35,320 We're going to define yet another interface. 11 00:00:35,320 --> 00:00:39,970 This interface is going to describe a very generic kind of event. 12 00:00:39,970 --> 00:00:43,070 So we're going to fine interface called event. 13 00:00:43,360 --> 00:00:48,400 We're gonna say that if something is an event it's going to have a subject and the subject is going 14 00:00:48,400 --> 00:00:51,120 to be one of the possible values out of our subjects. 15 00:00:51,130 --> 00:00:54,170 Enum so I'm going to import subject at the top 16 00:00:58,090 --> 00:01:04,200 from subjects and excuse me its subjects not subject singular. 17 00:01:04,490 --> 00:01:09,140 Then for the subject property inside this even interface we'll put in these subjects you. 18 00:01:09,350 --> 00:01:14,300 So for an object to be considered to be an event it must have a subject property that is one of the 19 00:01:14,300 --> 00:01:19,890 possible values listed inside of subjects will then say that this thing is also gonna have a data property 20 00:01:20,310 --> 00:01:22,010 and its type is going to be any. 21 00:01:22,110 --> 00:01:23,830 This might be a little mysterious right here right now. 22 00:01:23,850 --> 00:01:27,080 But trust me it's gonna make sense in just a moment. 23 00:01:27,120 --> 00:01:32,970 So here's the kind of crazy typescript part of code that unfortunately we can't really escape when we 24 00:01:32,970 --> 00:01:33,900 define listener. 25 00:01:33,900 --> 00:01:36,850 We're gonna set this thing up as a generic class. 26 00:01:36,980 --> 00:01:42,290 So I to put inside of your T extends Event. 27 00:01:42,300 --> 00:01:45,740 This means that whenever we tried to make use of listener in any way. 28 00:01:45,750 --> 00:01:50,700 So in other words whenever you tried to extend it we're going to have to provide some custom type to 29 00:01:50,700 --> 00:01:55,980 this this generic type right here it can be thought of as like an argument for types. 30 00:01:55,980 --> 00:02:01,470 So it can now refer to type T everywhere inside of our class definition. 31 00:02:01,480 --> 00:02:05,560 So this is how we're going to set up some pairing and make sure that typescript understands that it 32 00:02:05,560 --> 00:02:10,300 needs to make sure that we've got a match between the subject and data inside of our actual listener 33 00:02:11,200 --> 00:02:11,850 to do so. 34 00:02:11,860 --> 00:02:15,910 We're going to refer to this type T right here and we're going to say that the subject that is provided 35 00:02:16,300 --> 00:02:21,010 must be exactly equal to whatever subject was provided on this argument. 36 00:02:21,040 --> 00:02:28,670 So we'll say t at subject and then inside the on message function we're going to update this and rather 37 00:02:28,670 --> 00:02:31,310 than saying that the first argument is gonna be of type any. 38 00:02:31,310 --> 00:02:38,600 Instead we're going to say it is going to be of type T at data like so k. 39 00:02:38,630 --> 00:02:44,010 So at this point if you do not understand this little part right here absolutely totally okay. 40 00:02:44,220 --> 00:02:48,450 What really matters here is that you understand the end result and how this is going to get typescript 41 00:02:48,450 --> 00:02:51,870 to check and make sure that we defined all of our listeners correctly. 42 00:02:51,930 --> 00:02:54,750 So that is all we really have to do inside this base listener. 43 00:02:54,750 --> 00:02:59,010 We're not going to go back over to our custom ticket create a listener and see how we actually make 44 00:02:59,010 --> 00:03:02,140 use of this so let's open that up right now. 45 00:03:03,700 --> 00:03:05,700 So over here we're now getting an air from listener. 46 00:03:05,710 --> 00:03:08,970 And the reason is that now listener is a generic class. 47 00:03:09,100 --> 00:03:15,520 So we have to provide a argument for Type T So our argument in this case we want to put it in a type 48 00:03:15,520 --> 00:03:20,780 to listener right here that describes the event that we expect to receive inside this listener. 49 00:03:20,920 --> 00:03:22,600 That is the interface we just put together. 50 00:03:22,600 --> 00:03:28,270 We expect our listener to deal with something like this something that has a subject of to get created 51 00:03:28,480 --> 00:03:33,940 and has this structure of data inside of it so inside of our customer listener we are going to import 52 00:03:35,280 --> 00:03:43,460 ticket created events at the top from ticket created events and then we will provide that as the generic 53 00:03:43,460 --> 00:03:50,040 type to listener and now we're gonna start to see some errors start to light up. 54 00:03:50,040 --> 00:03:55,110 So as soon as we put that in we are now getting an air out of subject right here if we hover over it. 55 00:03:55,110 --> 00:04:00,210 It says that we assigned type string or something of type String to subject but if we are trying to 56 00:04:00,210 --> 00:04:06,420 actually implement listener correctly then we need to make sure that subject is of type subject dot 57 00:04:06,450 --> 00:04:09,270 ticket created. 58 00:04:09,280 --> 00:04:13,780 So this is the first sign right here that we've got typescript engaged in helping us make sure that 59 00:04:13,780 --> 00:04:16,410 we write out a listener correctly. 60 00:04:16,430 --> 00:04:20,800 The reason this is working is that we are providing the ticket created event as the generic type to 61 00:04:20,810 --> 00:04:23,380 listener back inside of our listener. 62 00:04:23,390 --> 00:04:29,210 We are saying that whatever subject is provided on this subclass must match up to whatever type was 63 00:04:29,210 --> 00:04:33,410 provided on this type arguments subject property. 64 00:04:33,410 --> 00:04:40,310 So long story short subject right here must be exactly equal 100 percent of the time to the subject 65 00:04:40,370 --> 00:04:41,130 we provided. 66 00:04:41,150 --> 00:04:50,480 Right here so to get this error to go away we have to import once again the subjects in going to import 67 00:04:51,290 --> 00:05:00,600 subjects from subjects I'm then going to annotate this thing subject as being of type subjects dot ticket 68 00:05:00,600 --> 00:05:02,140 created. 69 00:05:02,340 --> 00:05:03,590 That's the type invitation. 70 00:05:03,660 --> 00:05:09,310 And I'm going to set its actual value to subjects dot ticket created. 71 00:05:09,380 --> 00:05:12,020 Why do we have to provide the type invitation right here. 72 00:05:12,020 --> 00:05:14,060 Well if we delete it we're gonna get an error again. 73 00:05:14,060 --> 00:05:18,500 The reason for that is that typescript thinks that we might try to change the value of subject at some 74 00:05:18,500 --> 00:05:19,700 point on the future. 75 00:05:19,700 --> 00:05:24,170 So essentially typescript is afraid that we will do something like this not subject is some other value 76 00:05:24,200 --> 00:05:26,330 possibly even a value out of that. 77 00:05:26,330 --> 00:05:32,610 You know like subjects dot order updated by providing this type annotation right here. 78 00:05:32,610 --> 00:05:37,250 This makes sure that we can never change the value of subject to anything else. 79 00:05:37,290 --> 00:05:45,800 It must always be equal to the value of ticket created if we only provide the assignment subject can 80 00:05:45,800 --> 00:05:48,770 be of type anything inside of subjects. 81 00:05:49,010 --> 00:05:52,220 So it can be any of the possible cases inside of subjects. 82 00:05:52,400 --> 00:05:53,570 And again that's not what we want. 83 00:05:53,630 --> 00:06:00,110 We want to make sure that it is always exactly equal to ticket created if you come from the world of 84 00:06:00,110 --> 00:06:02,550 Java not javascript but plain Java. 85 00:06:02,600 --> 00:06:06,060 This would be a good location to make use of the final keyword. 86 00:06:06,080 --> 00:06:08,540 Unfortunately we do not have final in the world of typescript. 87 00:06:08,540 --> 00:06:12,440 So we do not get to take advantage of that. 88 00:06:12,470 --> 00:06:15,460 So now we have made a good improvement here. 89 00:06:15,500 --> 00:06:20,540 We no longer have to write out a plain string inside of our listener and again plain strings are always 90 00:06:20,540 --> 00:06:23,450 a place where we can make a typo very easily. 91 00:06:23,450 --> 00:06:28,310 So now we always have to refer to the subject Seena and that means that we only ever have to write out 92 00:06:28,310 --> 00:06:33,680 the exact name of a subject exactly one time that is going to dramatically reduce the possibility of 93 00:06:33,680 --> 00:06:36,230 us making a typo around the name of some subject. 94 00:06:36,240 --> 00:06:38,630 So that is very very good. 95 00:06:38,680 --> 00:06:43,510 In addition typescript is also always going to make sure that we provide a subject right here exactly 96 00:06:43,510 --> 00:06:48,590 equal to whatever subject was listed inside of the ticket created event interface. 97 00:06:48,670 --> 00:06:56,840 So if we try to change this for example to the order updated case on the enum once again typescript 98 00:06:56,870 --> 00:07:01,190 is going to yell at us it's going to say Hey you tried to provide the wrong subject. 99 00:07:01,190 --> 00:07:05,120 So now we've got a pretty good system here to make sure that typescript is going to ensure that we put 100 00:07:05,120 --> 00:07:08,190 in a valid subject. 101 00:07:08,320 --> 00:07:12,640 So this looks good but we still need to make sure that typescript does some type checking around this 102 00:07:12,640 --> 00:07:17,620 data argument right here because we still can reference properties on it such as name and cost that 103 00:07:17,620 --> 00:07:19,270 don't actually exist. 104 00:07:19,270 --> 00:07:20,710 So one last step to put together. 105 00:07:20,740 --> 00:07:22,410 Let's take a look at it in the next video.