Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:14Length:1.2 hours
Typescript fundamentals 400x277
  • Overview
  • Transcript

2.5 Modules and Namespaces

Hi, and welcome back to TypeScript Fundamentals. In this lesson, I'm going to teach you about a very important part of TypeScript programs, modules and namespaces. Normally, your code doesn't fit in one file. At least not in a way that is readable and maintainable. What you normally do is to split it into different files, usually one file per class. I've copied the example class we used in the last lesson into a new file so we can talk about modules. I've also created another file that wants to use the class. What we have to do is to make the file that contains the class into a module. Doing so is very simple, you just have to export something, in our case that's the class. Using the export keyword tells TypeScript that this is now a module. To use it, I can use the input keyword to tell the other file where the example class is. To use a specific export, we have to use curly braces since one module can export multiple things and state them here. Finally we have to say from which module we want to import it. This is done by using the relative path, in our case the dot ,for the current directory but omitting the file extension. Just like that, the arrows vanish. Sometimes it's necessary to rename the thing you want to export for consumers, and you can do that with pass. In this case, we are exporting example as special. And can use that in the other file. If you only have one export, you might want to use it as a default so that the consumers don't need to know the class name, just the module. This can be done by using the default keyword in addition to export. On the import side, you can now omit the curly braces. If you have imports with colliding names, you can give them an alias just like with the exports. Modules are one of the major building blocks in larger web applications. When developing with Angular, Ember, or other frameworks, you will use them a lot. They have also been added to ECMAScript 6. If you need to import a module from your package dependencies, you don't need to use a relative path, just the name of the package. This will automatically be resolved to the correct file in node modules. The modules I've talked about so far have been called external modules in earlier versions of TypeScript. They renamed them to align with the ECMAScript specification. They also had internal modules which are now called namespaces. Namespaces help you organize your code, where using modules isn't a viable solution. To be more explicit, if you aren't using modules, you're putting everything in a global namespace and might have duplicate declarations like we had in the beginning of this video before creating the module. The bigger the application gets, the more classes will pollute the global namespace. This can lead to duplicate class names, and in order to avoid it, you will have to create cryptic long class or function names. Namespaces help prevent that by putting their name around to shield them from the outside, or the outside from them. When using a namespace, you need to prefix your classes to be able to access them. And vice versa, you will have to export classes out of the namespace to be able to do so. With namespaces, everything that doesn't get exported is only usable within the name itself. With the introduction of JavaScript native modules, namespaces don't have much use anymore. It is recommend to use modules instead, as it is a much more compartmentalized approach where you can cherry-pick which modules you need in a file. You might encounter them here and there, and now you know what they are and how they work. To recap, modules help you split your application in smaller, logically divided chunks. You need to export classes, functions or values where you created them and import them where you want to use them. ECMAScript 6 also introduces modules, and TypeScripts aligns its modules to be similar. Namespaces are earlier internal modules and help compartmentalize code. It's not recommended to use them anymore but to use modules instead. In the next lesson, I'll be talking about generics, and how to make your classes and functions much more flexible. See you there.

Back to the top