Using Modules Demo | TypeScript Tutorial

before we start using modules  in our demo app there are few   configuration updates that we need to do in  the tsconfig.json file in our app directory   i have added this out file option all the  javascript will be output into a single file   this way i had only referenced a single file  in my html but i want to use the module bundler   that will deliver them to the browser so i am  going to remove this option for now i will add   a module option to specify which module  format i want the compiler to output   i'll use the common js format so now we are  ready to convert the individual files to modules   we will remove this triple slash directives  and convert each file into modules   let us start with result.ts here this  contains a single item result interface   so we can just add an export statement  here in front of the interface definition   and now this is a module my result  module is ready next person.ts file   it's again a simple interface so i'll  just add the export statement here   next let's go to the player.ts file here it has a  triple slash directive that references the person   module i'll remove this and use import statement  here the person module exports an interface   named person so i'll just add the interface name  inside the curly braces after the import keyword   this will be followed by the relative  reference to the person.ts file   in the same directory as the current file so  we are now importing the person dependency here   and here i'll change the player  declaration so that it is being exported   coming to the scoreboard file i have already  got errors with the result interface here   so here i'll change this triple slash directive  reference with the import statement that imports   the result interface i also want to make  sure that i export the scoreboard class   so i'll add an export statement here next in the  helper.ts file we will do it differently here it   currently contains a class with two static methods  get input val and get random number so i will use   this class to demonstrate exporting multiple items  from a module i'll first remove this helper class and i want to export both of  these functions from the module   i'll add function keyword in front of both this  function and remove this static keyword from here now we have two functions in our helper file   i'll use the export statement  here at the end of the file   so here the export keyword with the items i want  to export is inside a pair of the curly braces   i have exported the get input valve function as  get user input to the consumer of this module   and the second item to be exported is get random  number now let us move on to game.ts file that has   quite a few references to other modules i'll  just replace this with the import statements now this module uses both the functions get random  number and get input value from the helper module   i have imported the entire module  by putting an asterisk here   after the import statement i'll  refer to the module as helpers   next i have imported the result and player exactly  as they were declared in the respective modules   last is the scoreboard class here i have used  an elias score panel now when i want to use the   scoreboard class in this module i refer to  it as score panel after adding the imports   i'll export the game class now we need to make  changes in the code in the game class i'll change   all the scoreboard references here  to use score panel instead and here   helpers.getnumber so it will be helpers moving  further down in the calculate score method   i have to change the references to the get input  valve function to use get user input and use the   module as helpers and you can see that visual  studio is giving me some code completion help   i'll use get user input i'll do the  same down here okay that's all the   changes i need to make in this file the  last file to update is the main.ts file here I have got so many errors first I'll  remove the triple slash directive at the top   and replace them with import statements i have imported the game and player class  first I use the get input value function   from the helper module since i have alias that  function to get user input when I exported it   I'll refer to it as get user input when I  import it here I'll accordingly update the   references to get input value function in this  module ok that's all the changes we need to make   I have now updated the app to use modules  however i can't run it yet i have to configure   a module bundler but before i do that  let's see how typescript resolves module

Channel: Smartherd

Views: 916

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: 2NnnacLCEjk

Length: 6min 6sec (366 seconds)

Published: Tue Jun 14 2022