Table of contents
1.
Introduction
2.
Types of Modules
2.1.
Internal Module
2.2.
External Module
3.
Exporting a Module
4.
Importing a Module
5.
FAQs
6.
Key Takeaways
Last Updated: Mar 27, 2024

Modules in TypeScript

Author Parth Jain
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

A Typescript Module is a feature that allows the user to break the source code into multiple files. This code becomes easy to manage, decode and debug. Let us consider the process of baking a pizza.
We require sliced vegetables, seasonings, dough, cheese, and pizza sauce. If we did all the preparations in a single station, it would become quite messy and hard to manage. If we divided these steps into different stations, the process would become straightforward. 
This is the principle behind modules. We separate the functions, classes, and declarations from the main file and use only the prepared pieces of code.
Modules use the export keyword to export a particular piece of code from a file and import to impart that piece of code into another.
Another benefit of Typescript Modules is that if an identical function or class is required in another file, we only need to import the function or the class name instead of copying the entire function or class to the target file.

Types of Modules

Modules can be classified into two types:

  1. Internal Module
  2. External Module

Internal Module

Internal Module is used to group functions, classes, interfaces, and variables into a single package. This package can be used locally, or its components can be exported using the export keyword into another module. This Module is known as a Namespace. Namespaces were the earlier versions of Modules and hence are obsolete. 

//INTERNAL MODULE
//NAMESPACE
namespace Math {  
  function addition(a, b) {  
    console.log(a+b); 
 } 
  function subtraction(a, b) {  
   console.log(a-b); }
 } 
Math.addition(5,4);
Math.subtraction(9,7);

To export namespace, the export keyword is used before the function declaration.

//EXPORTING NAMESPACE
namespace Math {  
  export function addition(a, b) {  
    console.log(a+b); 
 } 
  export function subtraction(a, b) {  
   console.log(a-b); }
} 

External Module

External Module is the latest version of Modules and has a straightforward approach to achieve cleaner code. 
Instead of creating a package that consists of exportable functions, classes, or declarations, any class, function, or declaration can be exported from a file to another. 

Exporting a Module

The export keyword is responsible for exporting the function, class, or variable associated with it from one file to another. Export makes the target class or function a candidate for export, making it available for importing by another file.

Filename:greet.js

//greet.ts file
class Greeting {
 name: string;
 constructor(name: string) {
   this.name = name;
 }
 greet() {
   return "Hello, " + this.name;
 }
}
export class Intro extends Greeting {
 intro() {
   return "Welcome to the Coding Ninjas, " + this.name;}
}
export let end: string = "Have a great day!";

Importing a Module

The import keyword is responsible for importing the function, class, or variable that has been exported. To import, the import keyword is used along with the name of the function, variable, or class that has to be imported. Then, the local of the file that holds the code is entered using the from keyword.

Filename:index.js

//index.ts file
import { Intro, end as ending } from "./greet";
let a = new Intro("Aman");
console.log(a.intro());
console.log(ending);

Output

Welcome to the Coding Ninjas, Aman
Have a great day!

FAQs

  1. What makes a TypeScript file a module?
    A Typescript file containing an import or export statement at the top level of the code is called a module. 
     
  2. Can a file import more than one Module?
    Yes, Typescript allows more than one import from a module. 

Key Takeaways

We learned about Modules in Typescript and how their syntaxes work from this article. We also learned the critical differences between Namespaces and external modules. We looked into how modules make managing code much more effortless. However, this isn’t enough, as there is always much more to explore and learn about this vast field of Web Development. To know more about Typescript and its intricacies, check out the articles on Typescript or enroll in our highly curated Web Development course.

 

Live masterclass