What are the Modules in Typescript ?

Last Updated : 24 Jan, 2025

Modules in TypeScript allow you to organize code into reusable, manageable, and logical units by encapsulating functionalities into separate files.

They help avoid global namespace pollution by providing scoped declarations.
Modules can be imported and exported, enabling code reuse and better maintainability.

math.ts (Module File):

export function add(a: number, b: number): number {
  return a + b;
}

main.ts (Importing Module):

import { add } from './math';

const result = add(5, 10);
console.log(result);

The math.ts file defines a reusable function add, which is exported for use in other files.
The main.ts file imports the add function and utilizes it to perform an addition operation.

Output:

Types of modules in TypeScript

1. Internal Module

In earlier versions of TypeScript, internal modules were used to logically group related code, such as variables, functions, classes, and interfaces, into a single unit. This concept has since been replaced by namespaces in TypeScript 1.5 and later versions.

Namespaces help organize code and prevent naming conflicts by providing a container for related functionalities.
They allow for a modular code structure without relying on external module loaders.

FileName: myNamespace.ts

namespace MyNamespace {
  export function greet(name: string): string {
    return `Hello, ${name}!`;
  }
}

FileName: main.ts

import { MyNamespace } from './myNamespace';

const message = MyNamespace.greet('Alice');
console.log(message);

Exporting the Namespace: By adding the export keyword before the namespace declaration in myNamespace.ts, we make MyNamespace available for import in other files.
Importing the Namespace: In main.ts, we import MyNamespace using the ES module syntax. This allows us to access the greet function defined within the namespace.

Output:

Hello, Alice!

2. External Module

External modules, now simply referred to as modules, allow developers to organize code into separate files and reuse components across different parts of an application.

Modules help in encapsulating code, making it more maintainable and preventing global namespace pollution.
They facilitate better dependency management by explicitly defining what is exported and imported.

File: mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

File: app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

In mathUtils.ts, two functions, add and subtract, are defined and exported using the export keyword.
In app.ts, these functions are imported using the import statement, allowing their usage within the file.
This modular approach promotes code reusability and clarity by separating functionalities into distinct files.

Output:

Sum: 8
Difference: 2

Best Practices for Using Modules in TypeScript

Prefer ES Modules Over Namespaces: With the advent of ES6, it’s recommended to use modules instead of namespaces for better compatibility and maintainability.
Consistent Module Syntax: Stick to a consistent module syntax (either ES Modules or CommonJS) throughout your project to avoid compatibility issues.
Use Barrel Files for Re-exports: Create index files (barrels) to re-export multiple modules from a single entry point, simplifying imports.