#87 Different Import & Export Syntax | Namespace & ES6 Modules | A Complete TypeScript Course

when working with es6 modules there are different ways in which we can Import and Export things from or to a file and in this lecture let's quickly learn about them and understand how we can Import and Export in different ways let's go to vs code so in here we are importing this create user function and this get user function from this file and this is called as named Imports because here we are importing the functions using their name from this file so with this same name we have functions in this useraction dots file right so here what we are doing is we are importing this create user and get users from this user action. TS file and from this file also we are only exporting create user and get users so instead of specifying them separately what we can do is since we want to import everything which this useraction dots file is exporting we can use star here so we can say import Star from this file and what this user action. TS file is exporting it is exporting create user and get users function so in this file we want to export both of them so we are using star here and then we need to provide an leas so here let's simply say action okay or actions we can say so now from this useraction dots file we importing everything which this file is exporting and we putting it in an Lees and we calling it actions and now whenever we want to access a particular method or class or interface we need to access it on this actions on this alas so here we can say action. create user you see that that error is gone here also we need to say action. create user and here where we want to access get users function then we want to say actions. get users so in this way you using this star and providing an alas for it we can import everything from a file and when I say everything remember that everything which is being exported from that file that will be imported things which are not being exported that will not get imported here for example in this user actions we not exporting this user list so that will not get imported at this line when we are using star only those functions classes interfaces Etc will be imported here which is being exported from that file hope this point is clear and here we are using an Alas and we can also use alas for named Imports for example here we are importing this user class from this file so here also we can use this as keyword and provide an alas for it for example you now when we are providing an alas we cannot use the actual name then we will have to use the the alas name so here let me give a meaningful name so that it will make some sense so so let me call it as user with lower case U and now wherever we want to use this user class there we will simply use its leas like this if I save the changes we don't have any error the compilation is successful and we can see the result so you can also provide alas using as keyword for named Imports as well then let's talk about default export so as I mentioned these Imports which we are doing these are named Imports okay so here also it is a named import but what we can also do is we can do a default export now what do we mean by default export so in this file we are exporting this user class now from this file we are simply exporting this user class we don't have anything to export here so what we can do is we can export it as default okay and we can also export other things from here for example let me gohe and let me export a constant so I'll create a constant here let's call it pi equal 3.14 just for an example and I can export it from here now this export will be named export and to import named export we specify the name which we want to export in the curly braces I'll show you that with an example but for the default exports we don't need to import it using its actual name so for example we are using this user class in this user action. TS file so there now since this user class we exporting it as default I can go ahead and I can import it from this file and I can provide any name to it for example I can call it as people okay and whatever we are exporting default from here from this file from this user. TS file that will be assigned to this people so from this user. TS file we are exporting this user class as default so that will be assigned to this people and always remember that from a file we can only have one default export we cannot have multiple default exports okay so wherever we want to use that user class now we will have to use this people because inside this people variable only we are storing this user class we are importing it and we are storing it in this people variable okay and if we want to import the named exports then we will have to use the same approach so we will have to use curly braces like this and there we will specify what do we want to export for example Pi so this user. TS it is also exporting this P so we are importing it here so for the name name exports we are using curly braces and inside that we specify what do we want to import but for a default export we don't need curly braces and we can specify any name the name should not be same as the default export it can be any name and the default export will be assigned to it so this is called as default export all right if I save the changes everything should be working as expected now there is one more thing which I want to cover here and that is currently in this user action. TS file we are importing the user class so here we have this user class which we are exporting as default and we are importing it here and just to make things simple let me call it as user itself so that we will know what we are importing and Here Also let's replace it with user okay and then in the app. DS file we are importing this useraction dots file okay now here also let's go ahead and let's import user so for that let's say import user class from this model SL user.js okay now you might think that since both user action. TS file and app. TS file is dependent on this user. TS file this user. TS file will be downloaded twice and it will be executed twice no that is not the case so the thing is the code in the JavaScript file execute only once when the file is imported for the first time if another file then Imports the same file again it does not run again so for example this app. TS file will be the first file to be executed in that we are importing this user.js file okay and here we are also importing this user action. JS file so you might think that this file will be downloaded and executed twice but that is not the case when the app.js file will run browser will find that these two files are the dependencies for this app. TS file it will download these two files and it will execute it then when the user action. TS file will be executed there also it will see that okay this user action. TS file also has a dependency on this user.js file but this file has already been downloaded once so browser is not going to download it again and it is not going to execute it again okay so this is something you need to understand so that you can use es6 modules in your application appropriately and we can also validate this so for example if this file will be executed twice in that case let's write a console.log statement and here let's say user file executing uh user.js file executing so if this file is going to be executed multiple times based on how many times we are importing it in that case we should see this console.log message multiple times right but if I save the changes you will see that console.log message only once because this file has been executed only once even though we are importing it in app. TS and in useraction dots but that does not mean that it is going to execute this user. TS file twice or user.js file twice it will only get downloaded and executed once and that download loed file will be used for all the inputs all right so this is all from this lecture and this is all about modules so in this section we learned about how to use Nam spaces and how to use modules in our typescript application if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 163

Keywords: typescript, data types, configuration, classes, objects, ES6 features, decorators, tupescript tutorial, complete typescript course

Id: K5YdpFMVtAo

Length: 10min 0sec (600 seconds)

Published: Fri Jul 05 2024