1 00:00:00,660 --> 00:00:05,180 There's one more thing we're going to do inside of our custom listener right now instead of on message. 2 00:00:05,240 --> 00:00:09,720 We are referencing properties on this data argument that we know do not exist. 3 00:00:09,720 --> 00:00:14,520 So we want to somehow get typescript to complain to us and say name doesn't exist and cost does not 4 00:00:14,520 --> 00:00:19,370 exist to do so we're gonna change the type of data right here away from any. 5 00:00:19,590 --> 00:00:25,380 We're going to say that the type of data coming into on message is going to be equal to the type of 6 00:00:25,410 --> 00:00:27,940 ticket created events data property. 7 00:00:27,960 --> 00:00:30,670 Remember inside of ticket create event as an interface. 8 00:00:30,780 --> 00:00:35,550 We said that this thing was going to have some data that was going to be an idea a title and a price. 9 00:00:36,270 --> 00:00:39,220 What's more inside of base listener. 10 00:00:39,240 --> 00:00:43,980 So here's based listener we said that whenever we made use of listener we were going to provide some 11 00:00:43,980 --> 00:00:45,780 type argument to it. 12 00:00:46,140 --> 00:00:50,550 And we said that the first argument to on message was going to be equal to that type. 13 00:00:50,550 --> 00:00:52,530 Arguments data. 14 00:00:52,530 --> 00:00:57,440 So in our case the type argument to listener is ticket created event. 15 00:00:57,450 --> 00:01:06,190 So we are essentially saying that the first argument to data right here is that it is an object that's 16 00:01:06,190 --> 00:01:08,290 going to have an idea a title in a price 17 00:01:11,260 --> 00:01:17,110 so we need to update this type annotation right here from any to instead reference that data off of 18 00:01:17,140 --> 00:01:19,770 the ticket created event interface. 19 00:01:19,780 --> 00:01:26,740 Long story short we're going to place any with ticket created events at data like so this is not going 20 00:01:26,740 --> 00:01:31,630 to enforce typescript or get typescript to enforce some type checking on the properties we try to access 21 00:01:31,630 --> 00:01:36,880 on this data argument so we can no longer access these properties that don't actually exist like name 22 00:01:36,910 --> 00:01:42,970 and cost but we can't access properties that do exist such as I.D. and you'll even notice I'm getting 23 00:01:42,970 --> 00:01:45,050 that nice autocomplete now. 24 00:01:45,340 --> 00:01:53,530 Title and price it's now tied to gripped is going to yell at us anytime we try to access properties 25 00:01:53,530 --> 00:01:56,330 that don't exist which is exactly what we wanted. 26 00:01:56,350 --> 00:01:59,690 Now you might look at this and say Steven is this actually doing any type checking. 27 00:01:59,710 --> 00:02:03,430 How were we able to replace any with this and get everything working. 28 00:02:03,550 --> 00:02:04,670 Well take a look at this. 29 00:02:04,690 --> 00:02:10,240 Let me show you what our greatest fear is our greatest fear is that we might accidentally define some 30 00:02:10,240 --> 00:02:17,180 interface such as fake data and say this is something that has a name that's a string and a cost that 31 00:02:17,180 --> 00:02:22,430 is a number and we might accidentally think that this data argument is a type fake data. 32 00:02:22,520 --> 00:02:25,180 So this would be an example where we make a typo or something like that. 33 00:02:25,190 --> 00:02:31,850 We do too much copy pasting and we apply an incorrect annotation to data if we try to put that on. 34 00:02:31,880 --> 00:02:36,340 We're then gonna get a big error specifically around on message. 35 00:02:36,340 --> 00:02:42,620 So remember we are extending this listener base class typescript is going to look at the data portion 36 00:02:42,650 --> 00:02:48,720 of this ticket created event interface and it's going to make sure that we receive the first argument 37 00:02:48,740 --> 00:02:53,900 two on message as that data or the data portion of that interface. 38 00:02:53,930 --> 00:02:58,750 And so if we try to apply any other type to that argument we're gonna end up with an error. 39 00:02:58,820 --> 00:03:03,740 So I'd say that this is working as expected typescript is making sure that we always put it in the correct 40 00:03:03,740 --> 00:03:05,460 type for this data argument. 41 00:03:05,480 --> 00:03:13,250 So we must put in ticket created event data like so OK so that is pretty much it. 42 00:03:13,730 --> 00:03:17,300 Now I know the changes we've made probably seem really confusing. 43 00:03:17,300 --> 00:03:21,950 They might have seemed pointless but the whole point here is that now we have reduced the number of 44 00:03:21,950 --> 00:03:25,480 times that we referred to plain strings inside of our listener. 45 00:03:25,730 --> 00:03:30,050 And we also have something to make sure that we can only refer to the correct properties inside of this 46 00:03:30,080 --> 00:03:33,080 incoming piece of data from Nat streaming server. 47 00:03:33,080 --> 00:03:37,910 So this is going to dramatically reduce the possibility of us making Typos misspelling property names 48 00:03:37,940 --> 00:03:39,930 or anything like that. 49 00:03:39,950 --> 00:03:45,380 The other thing you might be kind of confused about is what portions of our code inside of here are 50 00:03:45,380 --> 00:03:50,090 going to be written inside of our individual services versus say the common module. 51 00:03:50,120 --> 00:03:53,510 Let's take a quick pause right here and start to address that question in the next video.