Modules in TypeScript

Modules in TypeScript allow you to organize and encapsulate code into separate files, making your codebase more maintainable and manageable. This article explores how to use modules in TypeScript, including importing and exporting functionality between modules.

---

Understanding Modules

Modules are a way to divide your code into separate files, each of which can export and import code. This modular approach helps in organizing code into reusable and logically separated components. In TypeScript, a module is any file containing a top-level import or export statement.

---

Exporting from a Module

To make code available for use in other modules, you need to export it. TypeScript provides several ways to export code:

1. Named Exports

With named exports, you can export multiple values from a module, and they must be imported with the same names:

// 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;
}

2. Default Exports

Default exports allow you to export a single value or entity from a module. This value can be imported with any name in other modules:

// file: calculator.ts
export default class Calculator {
  add(a: number, b: number): number {
    return a + b;
  }
}

---

Importing Modules

Once you have exported code from a module, you can import it into other modules using the import statement.

1. Importing Named Exports

To import named exports, use curly braces and the exact names of the exported values:

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

console.log(add(2, 3));        // Output: 5
console.log(subtract(5, 3));   // Output: 2

2. Importing Default Exports

To import a default export, use any name for the imported value:

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

const calc = new Calculator();
console.log(calc.add(2, 3));   // Output: 5

---

Renaming Imports and Exports

You can rename imports and exports to avoid naming conflicts or to provide more meaningful names:

1. Renaming Imports

Use the as keyword to rename imported values:

// file: app.ts
import { add as addition, subtract as subtraction } from './mathUtils';

console.log(addition(2, 3));      // Output: 5
console.log(subtraction(5, 3));   // Output: 2

2. Renaming Exports

Use the as keyword in the export statement:

// file: mathUtils.ts
function multiply(a: number, b: number): number {
  return a * b;
}

export { multiply as multiplyNumbers };

---

Importing Entire Modules

You can import all exported values from a module as a single object:

// file: app.ts
import * as mathUtils from './mathUtils';

console.log(mathUtils.add(2, 3));        // Output: 5
console.log(mathUtils.subtract(5, 3));   // Output: 2

---

Conclusion

Modules in TypeScript provide a powerful way to organize and manage your code. By exporting and importing functionality between modules, you can build more maintainable and scalable applications. Understanding how to use named and default exports, as well as how to import and rename modules, will enhance your ability to structure your TypeScript projects effectively.