Modules

TypeScript supports the concept of modules introduced in ES6. Modules allow isolating code and data and help splitting functionality into logical groups.

One of the major features of ES6 (and TypeScript) modules is their file scope. The code inside the module (classes, variables, functions, and other) does not pollute global scope and is not accessible from the outside unless exported explicitly.

To share the code of the module with the outside world, you use export keyword:

// module1.ts
export class TextBoxComponent {
  constructor(public text: string) {}
    
  render() {
    console.log(`Rendering '${this.text}' value.`);
  }
}

To use this code in your main application file or another module, you must import it first. You import the TextBoxComponent class using import keyword:

// app.ts
import { TextBoxComponent } from './module1'

let textBox = new TextBoxComponent('hello world');
textBox.render();

Module Loaders

ES6 and TypeScript rely on module loaders to locate files, resolve external dependencies and execute module files.

The most popular module loaders are:

TypeScript supports different formats of generated JavaScript output. You can instruct compiler to generate code adopted for multiple module loading systems using formats such as

Running at server side

You can test TextBoxComponent we have created earlier with node.js using commonjs module target:

tsc app.ts --module commonjs
node app.js

When executed it produces the following output:

Rendering 'hello world' value.

TypeScript automatically compiles referenced modules. It starts with app.ts, resolves and compiles module1 as module1.ts file, and produces two JavaScript files app.js and module.js that can be executed by node.js.

Here's an example of app.js file content:

"use strict";
// app.ts
var module1_1 = require("./module1");
var textBox = new module1_1.TextBoxComponent('hello world');
textBox.render();

Running in browser

In order to run module-based application in browser you can take SystemJS loader:

<script src="systemjs/dist/system.js"></script>
<script>
  SystemJS.import('/app/app.js');
</script>

Let's take a look at a simple TypeScript application that references an external module.

// logger.ts
export class Logger {

  output: any;

  constructor(outputId: string) {
    this.output = document.getElementById(outputId);
  }

  info(message: string) {
    this.output.innerText = `INFO: ${message}`;
  }

}

Our simple logger is going to put a message as a content of the document element provided from the outside.

// app.ts
import { Logger } from './logger';

let logger = new Logger('content');
logger.info('hello world');

The application needs to be compiled with SystemJS support to load correctly. You can configure TypeScript to generate compatible JavaScript code by setting module code generation setting to system:

tsc app.ts --module system

Source code

You can find source code for the examples above in the "typescript/systemjs-example" folder.

To install dependencies, compile and run the demo use the following commands:

npm install
npm start

Your default browser should run example page automatically. Once the page gets loaded you should see an expected message:

INFO: hello world