The previous entrance was dedicated to internal modules, while this one is for external modules, and in order to get benefits, it’s good for you to know RequireJS (also, next week I will be writing about RequireJS).
External module, a second version of the example
External modules have an extra of dificulty and another way of using them, because in ofder to use them you need to use require.js, a module loader. The fact of creating modules for yor Javascript code is due to two important questions: speed of loading and code quality, of course for reuse it. Another cool feature of requireJS os dependencies, becuase each module need to be care of its dependencies (this is not happening for internal modules)!
The main reason why you should use modules in TypeScript is because it support for AMD and CommonJS modules (for a better understanding, I encaurage you to click on the links to the documentation).
CommonJS appears because of the need of standart Javascript API, no matter if they are executed in a client or in a server. Also, the CommonJS specification is also use for creating apps using command line console or in client-server apps. As an example Node.JS uses CommonJS, axactly the same as IO.js.
The big difference between internal and external modules is that for external modules you don’t need to use the keyword module, but you should use export.
In a third version, let’s rewrite test.ts:
export function test() { console.log('Test') }
Also, let’s rewrite test2.ts:
export function test2() { console.log('Test 2') }
The differences between these two last versions are small: you only need to add export to the classes and functions you need out of the module.
Let’s modify also app.ts in order to use external modules, and now, we don’t need references any more:
import t1 = require('test')
import t2 = require('test2')
t1.test();
t2.test2();
The last change to be done is in the HTML code, where the reference to the script should be modified for requireJS, and you need to add also the reference to the starting module by using data-main.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejando datos - TypeScript</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
Before compiling, you need to change the compilation options in order to compile using AMD, because otherwise, you’ll receive an error:
Module App3 error
Let’s change the project properties, and also, there is no need to cpmpile to a single file any more, bacause requireJS load all, as indicated in the app.ts.
Module App3 project settings
Now, it’s turn to see if the last version of the project is working using external modules.
Module App 3
The problem with modules
Pero a pesar de los beneficios que supone el uso de módulos (sobre todo, por separar el código), aquí tienes la principal dificultad:
When you use modules… you need to choose to work with internal or with external modules: you cannot mix
Some developers are not aware of this little problem, but if you are developing large apps, it’s better to use external modules.
Happy coding!