Importing & Exporting Modules | TypeScript Tutorial

exporting and importing modules the api  exposed by a module is defined by the elements   that are exported from the module modules can  export any of the typescript constructs that   we have used in this course it may be functions  interfaces classes or even simple variables let   us see a few syntaxes which we can use to export  modules let's say there is this person interface   i can make it available to other  modules just by exporting it   add the export keyword in front of the interface  we can also export the functions in the same way   just add the export keyword in front of the  function same with the classes however i have   a default keyword here it will be available  for import just like other modules   but making this default specifies that this is  the default item which will be exported from the   given module now if i don't want the contents of  a class to be exposed to other modules i can just   define it normally without the export keyword  the code in this module will be private to it   now export statements serve much the same  purpose as exporting a declaration it's   just a different syntax now here are the same  three items i had exported in the previous slide   instead of placing the export  keyword in front of each declaration   i will export it using the export statement  i can just use this export statement once   and then put a list of items i want to export  separated by comma inside the curly braces   now when i use this list of export i  cannot take advantage of the default export   however i have another benefit here i can define  an alias for the exported item the syntax is to   use the name of the item to be exported followed  by as keyword and then the alias i want to use   so now i'll use this get input value function  as get user input and this will be applicable   in the modules that i import however it will be  get input val in the module where it is defined   to use the functionality exported from a module  we need to import it in the consuming module   let's see the ways how we can import modules  so here is a basic import that i have done   i'm importing the item participant from the  person module here's the syntax the import keyword   followed by the item you want to import then the  from keyword and then the module containing the   item which we are importing here i have specified  the path of the module so this will be called as   relative reference now because of this typescript  will look for a file named person with a valid   typescript extension in the same directory as the  current file we will see more about the references   relative references and non-relative  references later in this chapter   now once this participant item is imported i can  use it like any other class function or interface   here i have just declared a new  variable to have the participant type this is one way you could import  the default export from a module   the default export from the person module will  be assigned the name participant in this module   regardless of what it was named in the person  module now looking at some more examples of import   here i'm importing two items we don't need  to import everything that a module exports   we can be specific with what we want as well  here i am using the person type to create a new   variable human i can also import items and alias  them to new names as part of the import statement   here i'm importing the person class  and specifying that i'll refer to   it as participant i do that by using the as  keyword followed by alias i want to give to it   the person module will be known as participant in  my current module and just like previous example   i can use it like any other classes with  the elias participant which i have created   now another example of importing a module  is this here i am importing an entire module   instead of listing the specific items i have  used an s trick and then the name i want to   use to refer to it in the imported module i can  now access items in this module using the alias   followed by a dot and then the name of the item  so this these were the few syntaxes which we can   follow to import and export modules let us now  implement the modules in our demo application

Channel: Smartherd

Views: 4,360

Keywords: smartherd, what is interface, what is class, structural type system in typescript, typescript demo web app, math problem project, typescript demo, typescript tutorial for beginners, angular with typescript, annapurna agrawal, why use module, creating modules, importing module, exporting module, consuming module, traceResolution, baseURL, module resolution

Id: VPAvB5R6d5g

Length: 5min 19sec (319 seconds)

Published: Mon Jun 13 2022