We've now seen several different ways of putting together ad marker in a bad fashion.
So in this video we're going to focus on the correct solution or maybe not the correct solution maybe
the best solution.
All right.
Let's get to it just a quick reminder here.
Right now the issue with our current approach is that custom map has a direct dependency on all the
different classes inside of our application that we might want to show on the map.
So a custom map depends upon user it depends upon company.
And if we ever had like a car lot or park or anything else custom app would depend upon them as well.
So to fix this issue we're going to invert this dependency so to speak rather than custom map depending
upon all these different classes.
We're going to say hey class user if you want to work with a map it is up to you to satisfy the maps
requirements and company if you want to show up on the map.
You have to satisfy the maps requirements.
So how are we going to invert that dependency.
Well here's what we're gonna do at the top of the custom abductees file.
We're going to add in a little bit of configuration and its configuration up there is essentially going
to be some instructions on how a object can be an argument to the ad marker function so the very top
the File we're going to say hey every other class inside of our application every other class if you
want to be shown on the map or in other words if you want to be a argument to add marker here's what
you have to do so inside those directions we're gonna say to show up on the map you have to have a location
property remember that's the key.
You have to have a location property that is an object and that object has to have a latitude that is
a number and a longitude that is a number every other class as long as you have a location with Latin
long and you are eligible to be added as an argument to add marker.
So how are we gonna put together those directions.
Well we're going to make use of interfaces.
Remember we spoke interfaces a couple of videos ago and we looked at a diagram very similar to this.
We spoke about how we can use an interface to kind of behave as like a gatekeeper of sorts to a method.
So we're going to create an interface that defines what it means to be mapping all we're going to define
in this interface a set of instructions to all the other classes inside of application that tell all
those other classes how they can be eligible to be an argument to add marker.
So then it's going to be up to all of those other classes to opt in to being malleable and they can
be so by having that location property with the latitude and longitude that our numbers so that's how
we're going to kind of invert this dependency rather than saying oh our ad marker method has to accommodate
a user and a company and a park and so on instead user has to choose to fulfill the interface or satisfy
the interface by having the correct properties with the correct names in the correct types.
If a user does that then user has qualified to be an argument to add marker all right.
So this is like one of the prime best examples I can show you of interfaces.
And once again like I've said a billion times we're going to see this relationship right here in every
application we're going to work on.
So let's try putting together an implementation right now and see what it looks like.
So to get started I flip back over to my editor and at the top of custom map I'm going to define an
interface called mapping all.
So this right here is gonna be our instructions to every other class on how they can be an argument
to add marker.
So every other class can look at this interface and say oh I want to be mapping all I want to be an
argument to add marker.
And if they want to all they have to do is satisfy the properties we list in here.
So to be mapping tool to be an argument to add marker you have to have a location property that is an
object and that object has to have a latitude property that is a number and a LNG or longitude that
is a number as well.
If another class or just any other object inside of application has a location that is the latitude
and longitude they can be an argument to add marker to make sure that's actually the case.
Last thing to do is go back down to ad marker.
We're going to change the type on here.
We're going to say it to be an argument to add marker.
You have to satisfy the map table interface that we just created.
Like so OK.
So that's it.
That's the idea.
So now we have an ad a marker function that can take any argument so long as it satisfies interface.
So now if we start to add in like a class for park or car lots or a grocery store or dentist or whatever
it is hospital as long as they satisfy this interface right here they can be an argument to add marker.
One thing I wanna throw out there really quickly because we didn't super closely discuss this when we're
talking about interfaces.
Is that a single value inside of typescript can have multiple different types.
So even though we're talking about having like users right here in company an instance of a user has
type user but it can also fulfill the interface mapping tool and if it fulfills that interface then
user can also be of type manageable.
So single value can technically have like multiple different types just want to clarify that really
quickly.
All right.
Let's take another quick pause right here.
We're gonna come back the next video and fix up the rest of our code to make sure that we can pass in
a user in a company to this method.
I'll see you in just a minute.