TypeScript Tutorial: Modules in TypeScript (Chapter 8)

Consider you have a business logic, which requires to be clubbed together and executed in an isolated scope. TypeScript modules comes to rescue you from such situations. We are going to understand basics of modules in TypeScript during this post.

A TypeScript Tutorial for beginners on TypeScript

Modules in TypeScript

Assume you have an application for managing Tasks. You would like to segregate the definition of Task entity and all the operations related to that for rest of the application. We can define a module for that and separate them from rest of the application.

Modules are executed within their own scope, not in the global scope.

This means that variables, functions, classes, etc. declared in a module are not visible outside the module. If you want to expose and use certain features of a module outside of the module, you will require to export them. Let’s see a simple example.

module ToDoApp {
    class ToDo {
        Text : string;
        IsCompleted : boolean;
    }

    let list: Array<ToDo> = [];
}

In the above code we have defined a module which limits the scope for ToDo class and a list of ToDos.

Exporting Features

Now if we try to create an instance of ToDo class or access the list variable outside the module block, we will not be able to do so. We need to export these features from the module before we can use them outside the block. Here is how the module definition looks like after enhancing the same module with localized and exported features

module ToDoApp {
    var saveLocalData = function () {
        localStorage.setItem('todos', JSON.stringify(list));
    }

    export class ToDo {
        Text: string;
        IsCompleted: string;
    }

    let list: Array<ToDo> = [];

    export var addToDo = function (todo: ToDo) {
        list.push(todo);
        saveLocalData();
    }

    export var removeToDo = function (todo: ToDo) {
        list.splice(list.indexOf(todo), 1);
        saveLocalData();
    }

    export var getList = function() {
        return list;
    }
}

With this code, the save operation and the list itself is now hidden from the global scope and the the ToDo class and operations which can be performed in the ToDo app are exported.

Exporting / Importing Modules

We have seen the concept of exporting the features of a module outside the module. This is useful in case the consumer of that module remains in the same file, where the modules is defined. But, what if the consumer is in the separate file.

In this case the defined module can be exported and with the help of the module loaders (requirejs, commonjs) they can be imported into the file where they are required. Modules import works at the file level, which means all the code blocks in the file will have access to the imported module. Let’s see the example of the same by creating 2 files

// todoModule.ts
module ToDoApp {
    exports ...
    ...
}

export = ToDoApp;
// app.ts
import ToDoApp = require("./todoModule");

let todo = new ToDoApp.ToDo();

todo.Text = "Buy Milk";
todo.IsCompleted = false;

ToDoApp.addToDo(todo);

We have exported the ToDoApp from todoModule.ts and then imported the same from app.ts. Once the module is imported, we are able to consume the exports from that module.

There are more ways to import and export the modules in typescript but, this is the most widely used syntax. We will learn more about modules in our upcoming tutorial on Learning Advanced TypeScript. I will recommend you to keep a watch on this blog by subscribing.

In case you have any doubts and would like to provide any feedback, please feel free to leave a comment below. I will really appreciate your feedback and will be really happy to prove the answers to your questions. In the next chapter we will be learning about the concept of Typings and the purpose of having them.

Have a nice day and happy learning!

Go to Beginning with TypeScript Tutorial Index page.

Published by

Anant Anand Gupta

Microsoft Technology Professional

Leave a Reply