Javatpoint Logo
Javatpoint Logo

TypeScript Module

JavaScript has a concept of modules from ECMAScript 2015. TypeScript shares this concept of module.

A module is a way to create a group of related variables, functions, classes, and interfaces, etc. It can be executed within their own scope, not in the global scope. In other words, the variables, functions, classes, and interfaces declared in a module cannot be accessible outside the module directly. A module can be created by using the export keyword, and a module can be used in other modules by using the import keyword.

Modules import another module by using a module loader. At runtime, the module loader is responsible for locating and executing all dependencies of a module before executing it. The most common modules loaders which are used in JavaScript are the CommonJS module loader for Node.js and require.js for Web applications.

Modules can be divided into two categories:

  1. Internal Module
  2. External Module

Internal Module

Internal modules were in the earlier version of Typescript. Internal modules were used to logically group the classes, interfaces, functions, variables into a single unit and can be exported in another module. These modules are named namespace in the latest version of TypeScript. So today, internal modules are obsolete. But they are still supported by using namespace over internal modules.

Internal Module Syntax in Earlier Version:

Internal Module Syntax from ECMAScript 2015:

External Module

External modules are simply known as a module. When the applications consisting of hundreds of files, then it is almost impossible to handle these files without a modular approach. ECMAScript 2015(ES6) module system treats every file as a module.

Module declaration

A module can be declared by using the export keyword. The syntax for module declaration is given below.

The declared module can be used in other files by using an import keyword. This is given below. The file/module name is specified without an extension.

Example

Let us understands the module by the given example.

Create module: addition.ts

Accessing the module in another file by using import keyword: app.ts

Compiling and Executing Modules

Open the terminal and goes to the location where you stored your project. Now type the following command.

Output:

Sum: 30

Importing multiple modules in single file

We can define multiple modules in a single file. The syntax for multiple module declaration is given below.

Example

Let us understands the module by the given example.

Create module: Modules.ts

Accessing the module in another file by using import keyword: app.ts

Compiling and Executing Multiple Modules

Open the terminal and goes to the location where you stored your project. Now type the following command.

Output:

SUM: 30
SUBSTRACTION: 10

Re-exports

In TypeScript, sometimes modules extend other modules, and partially expose some of their features. A re-export does not import it locally, or introduce a local variable. In this case, we can re-export some of their features either using their original name or rename it.

Example

Let us understands the re-export concept of a module by the given example.

Create module: Modules.ts

Create re-exports module: re-exports.ts

In the below example, the name of Addition export class is changed to plus using {Addition as plus}. The re-exporting is useful in assigning a more meaningful name to an export which increases the readability of our program.

Accessing the module in another file by using import keyword: app.ts

Compiling and Executing Modules

Open the terminal and goes to the location where you stored your project. Now type the following command.

Output:

Sum: 30




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA