Getting Started with TypeScript – Part 11

Hi Friends,

In this section, we are going to talk about Modules. Modules, keep the code separated. In many ways, it help users to keep the code neat and clean. It’s something like we are going to keep different unit of works in different placeholders or you say in different files. By separating the code out, it enhances the productivity immensely, like test-ability and re-usability enhances immensely. This way, your code not only appears robust, but it also follows good pattern like code-of-separation and solid. Now, we explicitly declare module with the name module itself. From C# perspective, you can also think modules as equivalent to namespaces.

But, before that let me show you how to debug the TS code in Visual Studio, while running the same in IE. Here, one thing to note here, in order to debug the TS code, map file which is getting auto-generated with every TS file is very important to generate the symbols while debugging.

Below, you can see that, It hit the break-point, and it’s showing value like a normal C# debugger window, which is really nice to inspect the problem while debugging itself.

79th

77th

And, when I am done with debugging, it produced me the desired output.

78th

Below is the simple snippet explaining internal module. Internal modules or Named modules are basically the same thing. Anything, which is not prefixed with module keyword, means its in the scope of global module.

And, It’s equivalent JS file looks like

With the above change in place, when I run the app, then it will produce me the following output as shown below.

80th

We can also wrap the calling piece in another module and call the function as it is. This way code looks more cleaner and robust.

And, it’s equivalent JS file

Again, this will produce the same result as above. I hope, you would have liked today’s discussion. We will delve further, till then stay tuned and Happy Coding.

Thanks,
Rahul Sahay
Happy Coding