Name spaces are pretty nice but they're not necessarily perfect.
We saw one problem in the last lecture where I manually added all dependencies to each file.
When I remove drag and drop from Project List Yes for example it still compiles without errors.
This is not ideal.
Now it might or might not work depending on whether some other file imports that drag drop model which
I indeed need here.
Which here would be the case.
So technically even after removing this it works here.
But this is not right.
This is pretty dangerous if we rely on the fact that some file will handle it for us.
Well if we then delete or change that file which saved our ass we suddenly changed something totally
unrelated and our app stops working.
We definitely don't want that.
So it would be nice if we had imports and exports that clearly state what we import from which file
and if we need something here.
Drag Target for example and we're not importing it explicitly we get an error that is basically what
we want and we get this behavior with iOS 6 modules now iOS 6 modules also exist outside of the types
of the world modern browsers support them natively where the browser will then basically download all
dependencies of a file when it executes but types and all the supports them and then gets the additional
type support when we use them.
Now how do iOS 6 modules work.
Let's again start with drag and drop.
Let's remove that namespace thing which is a pure times good feature.
Let's keep the export keyword though the export keyword is not just there to work with namespace it's
actually a default javascript syntax which is also supported by typescript.
It means that you export this interface and this one here as well from this file and you can then import
it into a number of file.
In our case here we need it in the project item and project list files.
Now let's start with the project item to import something from yes module.
So with that is module syntax you specify import at the top of the file or near the top of the file
before you start writing any actual code.
Import from and then you point at that file with a relative path from the file on in which you are importing.
So in this case we need to go up one level with two dots and a slash so that we are in a source folder
and then we need to go here to the models folder and import drag and drop.
Now important at DOT J as here because you need to import as if it is already were compiled because
this will be taken over into vanilla javascript and then it should look for JavaScript there.
So for JavaScript files so dot J needs to be added.
Now you import something from there and for Dad you add curly braces between which you specify what
you want to import from that file and their I already get auto completion I want to import Dragon Ball
now Dragon Ball is available here and typescript sees that this is no way lable and is happy now we
need to convert everything so that I can show does at runtime.
So let's get rid of the namespace here as well not the closing curly brace as well.
And so for example here now we get what we want.
We get errors we get a component error project this is all missing.
So let's export and import all these things.
For example in base component get rid of the namespace keep the export keyword as you learned get rid
of the closing curly brace and reformat and project input.
We can also get rid of the namespace and all of the references here.
You can actually delete all reference imports you have anywhere
get rid of all the namespace curly braces project list get rid of the namespace and the references get
rid of the closing curly brace down there in decorators get rid of the namespace at the closing curly
brace and drag and drop.
We already got rid of it project get rid of the namespace and the closing currently braise project state
unsurprisingly get rid of the namespace and the closing curly brace here we actually were relying on
project being imported by some high profile I didn't have references to it here so that was that dangerous
behavior I was talking about this could have failed if we wouldn't import or if we wouldn't reference
our project part in the namespace in some high profile so that definitely was not ideal but with that
let's continue our refactoring and validation here get rid of the namespace here and all of the closing
curly brace here at the bottom and last but the least an apt yes get rid of these imports and if the
namespace so now we got errors everywhere but now we can start over.
Now let's maybe start over in the base component.
This is looking good.
It's not complaining it seems to have everything at once project input.
Well it is complaining.
For example there we need to component.
So let's add a import at the top and let's import component from dot slash based component.
This is how you import relatively if something is in the same folder.
Dot slash at the beginning.
Then the file name and then all the important Dot.
J.S. don't forget the dot.
J.S. at the end we also need to validator bull interface here and to validate method order of mind and
project state.
So let's import all these things.
Let's import from dot slash or no go up one level that you till then validation dot J.S. let's import
from that file validate lable and the validate function and import order bind from going up on level
decorators all to bind J.S. and last but not least a project state.
Let's import from going up on level state projects state J.S. from there we can import the project state
constant that we export there.
Now these are all the imports we need here to make this file work so let's we want to project item now
in there we need all the blind we need component.
We need the project model.
So let's add all these things.
Let's for example import the project model from dot dot slash models project J.S. let's also add component
which lives in the same folder.
So import dot slash based component J.S. and all the bind let's import order bind from dot dot slash
decorators order blind J.S..
And now this file here also has everything it needs.
Now let's move onto project list here and project lists.
We also need the component and zones I will actually Copy that over here from Project item added to
project list.
Yes but we don't need Dragonball here but drag target instead.
So let's import that.
And in addition we need the project state project status.
Yeah.
These are the things we need and also the project item plus.
So from the project model file we can also import project status.
You can't import multiple export the things from one at the same filed by simply separating them with
a comma between these curly braces just as you were seeing it here.
We also import the project stayed constant from the State folder project state J.S. and all the import.
Last but not least here at the very bottom we need it the project item class.
So import project item from dot slash project item dot J.S.
so let's move on.
Order bind is fine project state is complaining there we need the project model.
So at the top let's import project from going up one level models project on J.S. we also are using
project state as in here.
So let's import dad from that same file
and was that last but not least we get the apt yes file there we need to import project input from dot
slash components project input J.S. and the project list from Project List J.S. we now safeties it should
compile without errors and now we are using iOS 6 modules to organize our imports and exports if we
have a look at the browser though we get an error not a reason for data is that if we check the dist
folder get our bundle jazz follow right now we need to switch his contact again for one here we shouldn't
use MMD now but instead e as 2015 that is basically the code word for iOS 6 which was the atmos script
working that introduced iOS modules so we're basically telling typescript don't transform our imports
to anything keep them as they are modern browsers will understand it so that's important also make sure
you have a target of iOS 6 or higher here you now also should comment out the outfall again because
that's not supported with iOS modules and with that what you get to the disk folder is basically a replication
of your source folder but with JavaScript files so now we also need to go back to the index HMO file
an import app J.S. again because we got to app J.S. file in a distant folder now and again this app
today is fall we'll have your import statements in there because as I mentioned this is supported by
a javascript by modern javascript engines and modern browsers and the browser will resolve these imports
for you therefore so we now reload this car we still get an error cannot use import statement outside
a module well modern browsers support this syntax but you have to tell them that you want to use it
and you do tell them by removing the fir here and instead on the script tag where you import a file
which has these import statements you use type equals module if you now save this you see this works
and now if we add something here we get the working application again now if you inspect the network
tab by the way you will see that if you reload there are a bunch of network requests going on if I sue
out of it we can see it better all our Java's good files are requested here they are requested automatically
by the browser when it encounters our import so it starts with app J.S. that it sees the import to project
input J.S. here and hence of course the next request goes to project input it also does the same for
Project List now in Project input for example it would seek input from base component J.S. which is
why it also imports prop based component J Yes so that's done by the browser here we take advantage
of it and now we have another way of splitting our files but with the additional advantage that we clearly
state what we need from each file and if we omit an import typescript yells at us which it didn't do
with the previous approach which is why this approach is actually my recommendation and why it is the
de facto standard way of importing and exporting.
Now if you've worked with types before in other projects let's say in an angular project you might all
be used to not having to specify a file extension here.
Well we'll also be able to admit that once we add web pack and a build tool as long as we don't have
that and we rely on the browser to import our files you need to add that extra extension.