TypeScript Tutorial #14 - Modules

Key Takeaways

alright then gang so currently we have been writing all of our code in this one single file right here app TS and in the past in sandbox TS as well now that is absolutely okay for learning but when we're making a larger project typically it's easier to split our code into different modular files for example we might have one file which manages all the Dom interactions and maybe another file which manages database interactions or authentication or something else now this would make the project more structured and much easier to read and update in the future as well now the best way we can do that in typescript is by using the es6 module system where we can import and export things from different files when we need to now modern browsers support es6 modules already in vanilla JavaScript so we can just use them in typescript as well now it's important to note though that only modern browsers support this feature out-of-the-box typescript doesn't compile the module system down into something older browsers understand as well so I would recommend using a modern browser such as Chrome or Firefox to work with this if you are using webpack in the future with your typescript project then maybe you could sidestep that issue by bundling your code into one single file and in the future I will do a mini web pack with typescript series which explains all of that but for now let's try this module system in typescript so the first thing we need to do before we start working with this module system is to go into the TS config file find the module property right here and we're gonna change it to es 2015 so that is the regular Atmos group 2015 specification of the module system that's what we're going to use the regular JavaScript version I'm also going to change this to es6 for the output because we're just targeting modern browsers to do this so I'm gonna save that right there we also need to go to index.html and find where we have a reference to this script and we need to say that it's going to be a module so we do that by saying type is equal to module like so and now we're all set up and ready to use the module system so we do this say for example I want a separate file to have this class in it so it's not with the rest of the code down here well first of all let's go into source and create a new folder and I'm going to call this classes you could call it something else if you want like models or something I'm going to call it classes and then create a new file inside that and that is going to be called invoice dot TS so now I'm going to grab all of this class right here from the very top down to here not all of this stuff below it where we instantiate the class because we're still going to do that from app dot es just the top bit where we define the class itself and then go to invoice and then save it okay so we have this right here now this class defined but over here now we can't access that class because it's no longer inside this file and if I try to run this we get an error over here saying invoice is not defined so what we need to do if we want to use the invoice inside this file is import that invoice from this file but first of all we have to export it from this file now that's simple enough all we need to do is put export in front of this and now we're exporting this invoice class now if we want to import that class to another file all we have to do is go to the top right here and then I'm gonna say import curly braces from and we'll come back to this curly braces in a minute and we need to say what file we want to import it from now we want to go into the classes and then the invoice file so it's dot forward slash classes to go into the classes folder then invoice and you would think it would be dot es but it's not it's dot J's because at the end of the day we're compiling this down into JavaScript and the browser is going to import the JavaScript file not a typed grit file okay so that's important even when we're working with typescript we use the dot J's extension when we're importing something okay so what do we want to import from this file well we say that inside the curly braces right here now we export invoice right here so we just need to say invoice in here and we need to spell it correctly oh I see won't work like so so if I save that now everything should still work the same and we can see we can't still see all this stuff right here so that's all there is to it first of all we update this to use this module system and we also say inside index over here that we're using a module and then all we need to do is export whatever we want to export from a certain file and then import that into a new file like this when we want to use it dead simple so we've managed to use a module system here which greatly helps with our code organization and it will make things easier to maintain in the future as well but there are two major drawbacks here first of all the browser support only modern browsers support this module system so if a user is using an outdated browser or an older browser then you might get an error and it might not work and secondly it doesn't bundle our code into a single file the browser is still using the module system to load separate files and make multiple requests when we compile these things down notice in the public folder it didn't compile it down into a single file it compiled it down into both of these two files and it even created this class's folder for us if we look inside these we can see that we're still importing invoice and inside invoice we're still exporting this class right so we still have two javascript files and we're making separate requests for those finals if I go to the network tab we can see that one request for a PS and one request for invoice yes so that is the second downfall it's making these multiple requests now to combat both of these downfalls you click throw webpack into the mix that is going to bundle our code into a single file when it's completed and that way we only have one network request and all browsers are supported to now I will do a mini-series on getting started with typescript and web pack in the future but for now let's move on and talk about something else in typescript interfaces