Previous

TypeScript Introduction to Modules

In TypeScript, modules allow you to structure your code into smaller, reusable, and maintainable components. A module is any file that contains a namespace, class, function, or variable and exports these components to make them available for use in other files. Modules help in keeping the global scope clean and prevent naming conflicts by encapsulating code within a module boundary.

 

What are Modules?

Modules are a way to organize TypeScript code into separate, self-contained units that can be imported and exported between different files. A module can be an entire file that contains code you want to share, and it allows you to isolate functionality, which leads to more maintainable and testable code.

TypeScript modules use the export and import keywords to export and import components between different files.

 

How Modules Work in TypeScript

Exporting: You use the export keyword to expose functions, variables, or classes from a module so that they can be used in other modules.

Importing: The import keyword allows you to access the exported components from other modules.

 

Syntax of Modules

1. Exporting from a Module

You can export variables, functions, classes, or interfaces by adding the export keyword.

Example: Exporting Variables and Functions

// file: mathOperations.ts

export const pi = 3.1415;

export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}
  • In the above code, pi, add(), and subtract() are all exported from the mathOperations.ts module.

2. Importing from a Module

Once components are exported from a module, they can be imported into another file using the import statement.

Example: Importing Variables and Functions

// file: app.ts
import { pi, add, subtract } from './mathOperations';

console.log(`Value of Pi: ${pi}`);
console.log(`Sum: ${add(5, 3)}`);
console.log(`Difference: ${subtract(5, 3)}`);
  • In the above example, we import the pi, add(), and subtract() from the mathOperations.ts file.
  • The relative path ./mathOperations points to the mathOperations.ts file.

 

Default Exports

You can also export a single component as the default export from a module. This is particularly useful when you have only one main component to export.

Example: Default Export

// file: calculator.ts

export default function multiply(x: number, y: number): number {
  return x * y;
}
  • Here, multiply is the default export from calculator.ts.

Importing a Default Export

// file: app.ts
import multiply from './calculator';

console.log(`Product: ${multiply(5, 3)}`);
  • Since multiply is the default export, we don't need to use curly braces when importing it.

 

Renaming Imports

You can also rename imports while importing them into a module, which can be helpful if there are naming conflicts.

Example: Renaming Imports

// file: app.ts
import { add as sum, subtract } from './mathOperations';

console.log(`Sum: ${sum(5, 3)}`);
console.log(`Difference: ${subtract(5, 3)}`);
  • In this case, add() is imported and renamed to sum to avoid any name conflicts or to make it more meaningful in the context.

 

Re-exporting from a Module

You can re-export components from other modules without directly importing them.

Example: Re-exporting

// file: allOperations.ts

export * from './mathOperations';
  • The allOperations.ts file re-exports everything from mathOperations.ts. Any import to allOperations.ts will have access to everything in mathOperations.ts.

Importing from a Re-exported Module

// file: app.ts
import { pi, add, subtract } from './allOperations';

console.log(`Value of Pi: ${pi}`);
console.log(`Sum: ${add(5, 3)}`);
console.log(`Difference: ${subtract(5, 3)}`);
  • By importing from allOperations.ts, you gain access to all the exports of mathOperations.ts.

 

Namespaces vs Modules

In TypeScript, namespaces and modules are two different ways to organize code. The main difference is that:

  • Modules are files that use the import and export keywords to organize code and avoid polluting the global namespace.
  • Namespaces are used to organize code within a single file, but they don't support import and export keywords (and are more commonly used in older TypeScript codebases).

 

TypeScript Module Resolution

TypeScript uses a module resolution strategy to locate and load modules. There are two types of resolution:

  1. Classic Resolution (default in TypeScript)
  2. Node Resolution (used in Node.js environments)

You can configure the module resolution strategy using the moduleResolution option in tsconfig.json to make sure TypeScript can correctly find and resolve your modules.

 

Summary

Modules in TypeScript help structure code into self-contained units that can be easily reused and maintained. Key points include:

  • Exporting components using export.
  • Importing components from other modules using import.
  • Default Exports for the main exported component in a module.
  • Renaming imports to avoid conflicts.
  • Re-exporting modules to combine multiple exports into one file.
  • Modules help avoid polluting the global namespace, making code more modular and organized.

Using modules in TypeScript encourages better code organization and promotes the reuse of components, leading to a cleaner and more maintainable codebase.

Previous