TypeScript Modules - Internal Modules, External Modules and Exports

What's a Module? 

The module system is an interesting feature of TypeScript, the statically typed superset of JavaScript. Modules provide the possibility to group related logic, encapsulate it, structure your code and prevent pollution of the global namespace.

What’s an Internal Module? 

You can define modules within your typescript files and all variables defined within the module are scoped to the module and removed from the global scope.

You can access the variable outside the module using the export keyword and also you can extend internal modules, share them across files, and reference them using the triple slash. Syntax - (///) 

Stayed Informed – Learn Angular 2 with TypeScript

Table of Contents - TypeScript Modules

1.     Internal Modules

a.      Implicit Internal Modules

b.     Named Internal Modules

2.     External Modules

3.     Exports

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

1.     Internal modules are now namespaces.

2.     External modules are now simply modules, as to align with ECMAScript.

Module vs. Namespace-

Module is for external packages and the namespace is for internal packages. Actually, the module keyword has been replaced with the namespace keyword.

Namespaces are simply named JavaScript objects in the global namespace.

Modules can contain both code and declarations. The main difference is that modules declare their dependencies.

The named modules called “namespace” in latest version of TypeScript. So we can use namespace instead of internal modules in the TypeScript.

As per me, this one is the best coding practice but don’t mind the internal modules are also supporting, if you want can use it.

Stayed Informed - Angular2 Modules vs. JavaScript Modules

Advantages of Module –

1.     Code reuse

2.     Encapsulation

3.     Scoping of variables

4.     Support CommonJs

5.     Easier for testing

Implicit Internal Modules -

You simply write source code without worrying about modules that is called implicit internal modules.

Example as,

class AppGlobal {
    readonly baseAppUrl: string = 'http://localhost:57431/';
    readonly baseAPIUrl: string = 'https://api.github.com/';
};

let baseApiUrl = new AppGlobal().baseAPIUrl;///Returns http://localhost:57431/
let baseAppUrl = new AppGlobal().baseAppUrl;///Returns https://api.github.com/

Named Internal Modules –

Internal modules are come in earlier version of the Typescript and it was basically used to logically group classes, interfaces, and functions into one unit and it can be export in another module.

Now this logically group named call “namespace” in latest version of TypeScript. So we can use namespace instead of internal modules in the TypeScript. As per me, this one is the best coding practice but don’t mind the internal modules are also supporting, if you want can use it.

Example using module -

module System.modules {

    //this function can be accessed from outside the module because using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module because using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
          }
    }

    //this class can only be accessed from inside the module because not using export.
    class NotExportedClass {
        mulNumbers(a: number, b: number): number {
           return a * b;
        }

        divNumbers(a: number, b: number): number {           
            return a > 0 ? a / b : 0;
        }
    }
}

The Result looks like –

Example using namespace –

namespace System.namespaces {

    //this function can be accessed from outside the module because using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module because using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
        }
    }

    //this class can only be accessed from inside the module because not using export.
    class NotExportedClass {
        mulNumbers(a: number, b: number): number {
            return a * b;
        }

        divNumbers(a: number, b: number): number {
            return a > 0 ? a / b : 0;
        }
    }
}

The Result looks like -

Export - Exporting a declaration

Any variable, function, class or interface can be exported by using the export keyword. After using export keyword, you can access your variable, function, class or interface to outside the module.

Example –

module System.modules {

    //this function can be accessed from outside the module becaues using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module becaues using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
        }
    }
}

And

namespace System.namespaces {

    //this function can be accessed from outside the module becaues using export.
    export function addNumbers(a: number, b: number): number {
        return a + b;
    }

    // this class can be accessed from outside the module becaues using export.
    export class ExportedClass {
        public subNumbers(a: number, b: number): number {
            return a - b;
        }
    }
}

Default exports –

Each module can optionally export a default export and the default exports work with the keyword default and we can use only one default export per module.

Example -

export class User {
    //Todo your logic here..
}

And then -
import { User } from "./User";

//OR

//BaseUrl.ts
export default "http://localhost:57431/Account/Login";

//Login.ts
import BaseUrl from "../BaseUrl";
console.log(BaseUrl); //"http://localhost:57431/Account/Login"

External Modules –

External modules are useful in sense they hide the internal statements of the module definitions and show only the methods and parameters associated to the declared variable.

It is using when dealing with large JavaScript based applications.

When we using nodejs or external modules, you can export an entire module and then import it into another module.

Example -

// userList.ts file
// imports the users.ts file as the users module
import impUser = module('users');

export function userList() {
    var user = new impUser.users();
    user.getUsers();
}

// users.ts file
// exports the entire module
export class users {
    getUsers() {
         return ["Anil", "Alok", "Dilip"];
    }
}

Stayed Informed – Learn Angular 2 with TypeScript

I hope you are enjoying with this post! Please share with you friends. Thank you!!