What are the Modules in Typescript ?

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:

15

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.