Deep studying tsconfig.json. Part 2. Modules (Compiler options)

okay hey everyone Latino and in this video we will continue to study our typescript config and next properties and in this video we will study modulus properties it is part two actually I wanted to record modulus and emit in this video but at the end I understood that in emit me to put more attention and decided to start from modulus okay in this video we will study what is base URL model model resolution model suffixes pulse root directory routers type roots and things around it and also revise a little information about different models which we have it can be common just required yes ecmascript modelers everything we will cover here but before we will not start our video of course not forget to subscribe on this channel press Bell icon and go to watch new video [Music] okay hello everyone uh let's start to study modulus properties which is allow your damn Global access based URL model model resolutions suffixes not resolve pass resolve Json model Rudy root deer's type roots and types we go through all these models actually before I wanted to create for model and emit together but here's a wrap more many properties which are not super understand and even the documentation not help me with it because it's neat um I usually better to understand when there are examples so let's try to discover these models first of all we start with allow UMD Global access uh and let's read about what it means when set to True allow UMD Global access lets you access your export AS Global from inside model files a model file is a file that has Imports and or exports without this flag using an expert from UMD model requires an import declaration how I understood if you use want to use jQuery or lodash or really a library which you use everywhere you can use this allow um the global access and put it into true but actually I don't know how proper way it's better to put into your program I looking for some examples and you can use I think global.d.js file and put here Global constant for example free jazz but it's neat to play with it uh how bad it works but if you need a global access you should use alloyum the global access property next thing base URL lets you set a base directory to resolve non-absolute model names for example you have a directory based URL you have different files and folders here and if your base URL is best URL by default base Euro dot slash or which is connected with the same folder where typescript config.json exists so in that case you just need import a hello world from hello world and you just can write hello.world which is folder slash world if for example inside you have I don't know you can put any base URL directory for example I have a folder where I slightly pay with different things for example I have this folder and can set as base URL core it means that inside I can import everything like test without writing core folder yes if you need something like that you should use this property module what means smaller set the model system for program now see the model's reference page for more information let's go so uh starting with atmoscript 2015 JavaScript has a concept of models typescript shares this concept modulus are executed within their own scope known as Global scope usually how you remember before if you if you work with JavaScript before 2015 I worked and maybe you remember we imported a JavaScript and script files at the beginning of the document and after it you can override any function or variable and Etc everything became Global of course if you if you have a function in function you have open scope which is about function and it was some approaches which you can use before for example function which called by your own and Etc usually this thing if you needed uh to create a new library like jQuery and from ecmascript 2015 as a conception around model has started and it means that each file for example models Global this means that variables function classes and Etc declarated in a model are not visible outside the model unless they are explicitly exported using one of the export form and to consume a variable function class interface exported from a different model it has to be imported using one of the import form are also interesting scene which model is quite well known well-known model loader used in JavaScript and not just loader4 common JS modulus and their require.js loader for AMD modulus in web applications in typescript so just as in ecmascript 2015 any file contains up level import or export is considered a model so um with ecmascript 2015 usually used this format Import and Export export when you write your own function or interface or class you export this model and update in another file you can import this model and use it through your program so um and this is really a cool thing about scope and isolation and what this property do which is model it helps you to describe each model system you want to use in compile for example we can set common GS modulus here common JS and if I for example delete this I put here this so and I just do this com and inside of this I have this Define property it is Eggman common JS modulus and everything transpile in this I can use ecmascript models or UMD and it will looks like that AMD modulus system actually a First Time season that's okay or yes next um for example here and what's next is come I for example compile and what I have here another system of modulus which is here ears next well and there are a lot of different modelers I usually not recommend use ears next modulus just because if something changed a new standard of JavaScript it can affect your code and better to use something really proper like es2020 yes 2015 and Etc well and if you're wondering about the difference between these atmoscript types adds support for dynamic Imports and import meta what is import method import meta this is meta text which your page can have and how I understood in your new version standards you can import them like an object it's really cool so and other properties which you can use model resolution specifies the model resolution strategy usually use node for not just common JS implementation um yeah but uh I'm not super understand how it helped I tried to play it with different things around model resolution okay mostly I suggest not relative model resolution is a process a compiler uses to figure out what an import refers to consider and import statement like import a from Model A in order to check any use of a the compiler needs to know exactly what it represents and will need to check its definition Model modul A okay so usually we use we use we use again a return back usually we use not not yes for not just a common Jazz implementation okay go next model suffixes now if your um describe this property for example you can add different suffixes which your file has and after it you can just import like that for example food.us.ts you don't need to write about this you just import form and this suffixes will be recognized uh these two quarters just mean DOT type script file next thing now resolve by default typescript we'll exam examine the initial set of file for import and directives and add this result files to your program if no result is said this process doesn't happen well actually this property I also didn't use it before but how I understood it help if you have really something strange strategies for finding your modelers for example I read this problem on stack Overflow and it was difference between resolution and finding and and this guy had a problem and when he said no resolve everything worked fine so if you have I will have his problem with resolution you can just put no resolvers true but it needs to play really okay pause now this part for me it's um like aliasis in webpack I think which help us to show to have shortcuts for some libraries or for example some parts of your application for example we have jQuery and we have this path logical we can just say everything of this is jQuery and just after it import just to query without this large way or for example you have up directory config environment shared helpers test a lot of different directories you can set way for each directory and after it you can just use in your break program import my file from up slash and Etc it will looks like import my function from from up up for example or up home everything what is in app folder and uh you can uh put this import everywhere in your program program I mean it could be a lot of folders which is go inside and instead to do things like that and finally here you are in home directory you can just write something like that it's really really amazing thing which you can use and it helps to have these shortcuts and not write really a large waist to your code next property resolve Json model which is about for example if you said this result Json model in true you can import jsons without this property you contain purchases for example this is this directory I remove this sorry for example somewhere I had there is Json which is Json and I just import settings from this Json and also I have resolution here if for example I put this property in in the false what I have is gone I have a problem import settings from Json there is a problem here okay go next root directory mostly As the longest common Paths of all non-declaration input files uh how I understood this root directory it means that a folder which is uh has more files in your project if it's possible to describe this way but for example I have here product Bible art this is my website I have several several clients here and for example server and the most important folder is this Source other things around config integration public adjusts small folders Edition but the source is the main important folder and this is root directory and usually you should set this root directory but it's not about things that only root directory will be compiled not it's not about Zed everything which is actually how I understood everything what is clothes I mean everything what you impart will compile in your code but mostly everything which is close to test config.json will compile but you can exclude it only with additional include exclude now files things but everything have to be compiled and also outputs here are when you compile your code you compile it um in model which you choose ecmascript or common JS modulus and Etc you should to set a naming of this directory I think by default this is dissed I'm not sure exactly for example I remove it uh will it here put through I remove this and discount and what I have I if I have no this okay everything will compile close to this file this is awful way to be honest because your file started to be double and because of that it's really cool to set output dear for example this door resolve now usually this is this but I put another name in just to show you that you have this name in here and everything now inside will be outside core or test configure tube why outsort code was compiled it outside this config but somewhere here I import this function and because it was compiled what's next root deals if you have multiple root deers and how I understood they can communicate better between them you can set up several routers yeah well and what's next type Roots you declare by default all visible types packages included in your compilation for example not model not modulus types not modulus types A lot of types inside of it you have that and what what what what we have next and if you don't want that all types will be included in your program you should just set type Roots which you really want and here also about packages you need types for not just Express if you want if you don't want that all types well uh will be compiled okay and net and next things is about emit I think we finish on this so uh we have studied our um our models and next video also I also will watch how many views this video have and uh after it I also decide this theme is really costed if you're really interesting in videos around typescript config and you want that it continue just put a comment like button subscribe of course and see you in next videos with your Elena Latino bye bye thank you [Music]

Channel: Elena Litvinova — The Art of Web Development 🛸

Views: 635

Keywords: css, js, уроки по js, Елена Литвинова, Искусство веб-разработки, профессиональные уроки JavaScript, webelart, allowUmdGlobalAccess, baseUrl, module, moduleResolution, moduleSuffixes, noResolve, paths, resolveJsonModule, rootDir, rootDirs, typeRoots, types, Elena Litvinova

Id: kkYvVbe-dsU

Length: 19min 19sec (1159 seconds)

Published: Wed Mar 08 2023