Modules in TypeScript

What are Modules in TypeScript?

A module is a way to create a group of related variables, classes, interfaces, functions, etc. It is executed in the local scope, not in the global scope. A module is created by using the export keyword and can be used in other modules by using the import keyword. A module can be imported by another module using the module loader. Module loader is responsible for finding and executing all the dependencies of a module before executing the loader. The most common module loader that is used is the CommonJs module loader for Node.js and require.js is majorly used for Web-based applications.

Types of TypeScript Modules

Modules are broadly classified into two categories:

• Internal Module
• External Module

Internal Module

It used to come in the earlier version of TypeScript. The internal module was used to logically group classes, interfaces, and functions into a single unit and can be exported into another module. This kind of grouping is called a namespace in the latest version of TypeScript. Hence, they are outdated rather we can use a namespace. They are still supported in TypeScript but it is recommended to use a namespace over internal modules.

Syntax of Internal Module (Old)

Syntax of Namespace (New)

External Module

External modules are also known as modules. When we use a modular approach, it is difficult to handle an application that consists of hundreds of files. They are used to specify load dependencies between multiple external js files. The external module will not be applicable if the application has only one js file. Traditional dependency management between the JavaScript files can be done using browser script tags. There are two ways to load dependent js files from a single main JavaScript file.

• Client Side: Require.js
• Server Side: Node.js

Module Declaration

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

We can use the declared module in other files using the import keyword. The file/module name is specified without an extension.

Example

Module creation: sub.ts

When we will access the module in another file by using the import keyword: app.ts

Compiling and Executing Modules

To compile and execute the module, we will open the terminal and go to the location where you stored the project. Now, we will type the following command in the terminal window.

Output

Importing Module into Variable

We can import all the exports in a module as shown below:

In the above snippet, we imported all the exports in the Sub module in a single variable called subt. Hence, we don't have to write an export statement for each module. In the snippet, we will import the Sub class into the subt variable which can be accessed using the function subt.Sub.

Output

Renaming Export Module

We can change the name of the export as given below:

Output

In the above snippet, the name of the Sub export class is changed to Associate using { Sub as Associate }. This can be useful in assigning a more meaningful name to export, as per our needs that increases reliability. Once, we define our modules in .ts files, then we need to compile them to get .js files.

Importing Multiple Modules in a Single File

We can declare multiple modules in a single file. The syntax for multiple module declaration is as follows:

Example

Module creation: Module.ts

We will access the module in another file by using the import keyword: app.ts

Compiling and Executing Multiple Modules

To compile and execute multiple modules, we will open the terminal and go to the location where you stored the project. Now, we will type the following command in the terminal window.

Output

Re-exports

In TypeScript, modules extend other modules and partly reveal some of their features. A re-export will neither introduce a local variable nor import locally. In that case, some features can be re-exported either using their original name or we can rename the original name to re-export.

Example

Module creation: Module.ts

Create a re-exports module: re-export.ts

In the below snippet, the name of the Multiply export class will be changed to plus using {Multiply as plus}. The re-exporting is useful in assigning a more meaningful name to an export that increases the readability of the program.

We will access the module in another file by using the import keyword: app.ts

To compile and execute the above module, we will open the terminal and go to the location where you stored the project. Now, we will type the following command in the terminal window.

Output