In a previous post I wrote a small introduction about modules, anoher cool feature of #TypeScript for a better code organizzation and code reuse. If you use to code in C#, it’s similar to NameSpace, and another cool feature is that modules can be distributed in several files as well.
Modules in TypeScript
Mdules allow you to group code aiming for the same purpose. For example, if you have a large project, it’s not a bad idea that you think of using several modules: one for interfaces, one for classes related to our database, and one for the other classes (well, this is my proposal, but you can choose other configuration).
The purpose of a module is to group all within a ModuleName { your functions and classes }. If you need to use functions and classes from outside, you must include the export keyword.
Let’s create a small example for a better understanding of how modules work in TypeScript. Let’s create test.ts:
function test () { console.log('Test'); }
Also, create a second file test2.ts:
function test2 () { console.log('Test 2'); }
Now, let’s write our app file app.ts, where you reference to the files needed: test.ts and test2.ts:
/// <reference path="./test.ts" /> /// <reference path="./test2.ts"/> test(); test2();
app.ts
The HTMLcode is so simple, becuase it’s an example:
<!DOCTYPE html> <html lang="es"> <head> <title>Manejando datos - TypeScript</title> </head> <body> <script src="app.js"></script> </body> </html>
As you can verify, you only need to add your app.js in the HTML file, but it’s a good idea to compile all code in a single file (if you don’t want to, it’s only a matter of including the rest of references using script tags). Yuo can do this under Project properties:
project settings CATS
Compile and execute in a browser:
Module app
If you don’t compile on a single file, you’ll get an error, like this:
Module app error
Version 1, using internal modules
If you want to group the two files test1.ts and test2.ts in the same module, you only need to include the keyword module and export all that you need by using export:
Now, it’s time to refresh test.ts:
module App { export function test() { console.log('Test') } }
Also, a new version of test2.ts:
</pre>
<pre>module App { export function test2() { console.log('Test 2') }}
And of course, you need to modify app.ts in order to use the module App, although you need to maintain the references:
/// <reference path="./test.ts" /> /// <reference path="./test2.ts"/> App.test(); App.test2();
As before, compile on a single file, and the result is the expected.
Module App
A brief summary of the internal modules
Certainly, to use modules requires an extra effort for a typescript developer, with much added value, but above all, the main purpose of using modules is thinking about the future, code reuse. The example shown here is quite significant to know what the basic operation, but it gets harder as we won in difficulty. Of course, with a little practice, modules would be part of your skills (and I tell you from my experience).
If you move to TypeScript 1.5, the internal modules have changed their name to NameSpaces, as in C#. you can read more features of TS 1.5 here.
Next step is external modules, another difficulty for starting with TypeScript, but with a lot of benefits for the future!
Happy coding!