All right.
This video is where things are going to get just a little bit nasty because we're gonna have to write
out a little bit of crazy typescript code the syntax is gonna be a little bit weird but I'm pretty sure
that once you see it all in action it's gonna make a lot of sense.
So our goal here is to somehow get typescript to understand that it needs to make sure the subject we
have listed right here matches up with the type of data that we provide.
Right there.
So how are we gonna do this.
Well we're going to go back over to our base listener file and cyberspace listener at the very top.
We're going to define yet another interface.
This interface is going to describe a very generic kind of event.
So we're going to fine interface called event.
We're gonna say that if something is an event it's going to have a subject and the subject is going
to be one of the possible values out of our subjects.
Enum so I'm going to import subject at the top
from subjects and excuse me its subjects not subject singular.
Then for the subject property inside this even interface we'll put in these subjects you.
So for an object to be considered to be an event it must have a subject property that is one of the
possible values listed inside of subjects will then say that this thing is also gonna have a data property
and its type is going to be any.
This might be a little mysterious right here right now.
But trust me it's gonna make sense in just a moment.
So here's the kind of crazy typescript part of code that unfortunately we can't really escape when we
define listener.
We're gonna set this thing up as a generic class.
So I to put inside of your T extends Event.
This means that whenever we tried to make use of listener in any way.
So in other words whenever you tried to extend it we're going to have to provide some custom type to
this this generic type right here it can be thought of as like an argument for types.
So it can now refer to type T everywhere inside of our class definition.
So this is how we're going to set up some pairing and make sure that typescript understands that it
needs to make sure that we've got a match between the subject and data inside of our actual listener
to do so.
We're going to refer to this type T right here and we're going to say that the subject that is provided
must be exactly equal to whatever subject was provided on this argument.
So we'll say t at subject and then inside the on message function we're going to update this and rather
than saying that the first argument is gonna be of type any.
Instead we're going to say it is going to be of type T at data like so k.
So at this point if you do not understand this little part right here absolutely totally okay.
What really matters here is that you understand the end result and how this is going to get typescript
to check and make sure that we defined all of our listeners correctly.
So that is all we really have to do inside this base listener.
We're not going to go back over to our custom ticket create a listener and see how we actually make
use of this so let's open that up right now.
So over here we're now getting an air from listener.
And the reason is that now listener is a generic class.
So we have to provide a argument for Type T So our argument in this case we want to put it in a type
to listener right here that describes the event that we expect to receive inside this listener.
That is the interface we just put together.
We expect our listener to deal with something like this something that has a subject of to get created
and has this structure of data inside of it so inside of our customer listener we are going to import
ticket created events at the top from ticket created events and then we will provide that as the generic
type to listener and now we're gonna start to see some errors start to light up.
So as soon as we put that in we are now getting an air out of subject right here if we hover over it.
It says that we assigned type string or something of type String to subject but if we are trying to
actually implement listener correctly then we need to make sure that subject is of type subject dot
ticket created.
So this is the first sign right here that we've got typescript engaged in helping us make sure that
we write out a listener correctly.
The reason this is working is that we are providing the ticket created event as the generic type to
listener back inside of our listener.
We are saying that whatever subject is provided on this subclass must match up to whatever type was
provided on this type arguments subject property.
So long story short subject right here must be exactly equal 100 percent of the time to the subject
we provided.
Right here so to get this error to go away we have to import once again the subjects in going to import
subjects from subjects I'm then going to annotate this thing subject as being of type subjects dot ticket
created.
That's the type invitation.
And I'm going to set its actual value to subjects dot ticket created.
Why do we have to provide the type invitation right here.
Well if we delete it we're gonna get an error again.
The reason for that is that typescript thinks that we might try to change the value of subject at some
point on the future.
So essentially typescript is afraid that we will do something like this not subject is some other value
possibly even a value out of that.
You know like subjects dot order updated by providing this type annotation right here.
This makes sure that we can never change the value of subject to anything else.
It must always be equal to the value of ticket created if we only provide the assignment subject can
be of type anything inside of subjects.
So it can be any of the possible cases inside of subjects.
And again that's not what we want.
We want to make sure that it is always exactly equal to ticket created if you come from the world of
Java not javascript but plain Java.
This would be a good location to make use of the final keyword.
Unfortunately we do not have final in the world of typescript.
So we do not get to take advantage of that.
So now we have made a good improvement here.
We no longer have to write out a plain string inside of our listener and again plain strings are always
a place where we can make a typo very easily.
So now we always have to refer to the subject Seena and that means that we only ever have to write out
the exact name of a subject exactly one time that is going to dramatically reduce the possibility of
us making a typo around the name of some subject.
So that is very very good.
In addition typescript is also always going to make sure that we provide a subject right here exactly
equal to whatever subject was listed inside of the ticket created event interface.
So if we try to change this for example to the order updated case on the enum once again typescript
is going to yell at us it's going to say Hey you tried to provide the wrong subject.
So now we've got a pretty good system here to make sure that typescript is going to ensure that we put
in a valid subject.
So this looks good but we still need to make sure that typescript does some type checking around this
data argument right here because we still can reference properties on it such as name and cost that
don't actually exist.
So one last step to put together.
Let's take a look at it in the next video.