Modules in TypeScript

Introduction

As your TypeScript projects grow in size and complexity, it becomes essential to organize your codebase into manageable pieces. Modules are a fundamental feature of TypeScript that help you achieve this by allowing you to split your code into separate files and then combine them as needed. In this tutorial, we'll explore how to use modules effectively to keep your code clean, maintainable, and scalable.

Concept

In TypeScript (and JavaScript), a module is simply a file containing declarations and statements that can be imported from other files. Modules help you encapsulate functionality, promote reusability, and avoid naming conflicts by providing a way to define private and public interfaces.

Key Concepts

1. Exporting: You can export classes, functions, variables, or types using the export keyword.
2. Importing: You can import exported entities from other modules using the import statement.
3. Default Exports: A module can have one default export in addition to named exports.
4. Namespace Imports: You can import all exports from a module into a single namespace.

Examples

Let's dive into some practical examples to understand how modules work in TypeScript.

Example 1: Basic Export and Import

Suppose you have a file math.ts that contains utility functions for basic arithmetic operations:

1// math.ts
2export function add(a: number, b: number): number {
3  return a + b;
4}
5 
6export function subtract(a: number, b: number): number {
7  return a - b;
8}

You can then import these functions in another file, say app.ts:

1// app.ts
2import { add, subtract } from './math';
3 
4console.log(add(5, 3)); // Output: 8
5console.log(subtract(5, 3)); // Output: 2

Example 2: Default Export

A module can have one default export. This is useful when you want to export a single primary entity from the module.

1// calculator.ts
2const PI = 3.14;
3 
4export default {
5  add,
6  subtract,
7  multiply(a: number, b: number): number {
8      return a * b;
9  },
10  divide(a: number, b: number): number {
11      if (b === 0) throw new Error("Cannot divide by zero");
12      return a / b;
13  }
14};

You can import the default export using any name:

1// app.ts
2import Calculator from './calculator';
3 
4console.log(Calculator.add(5, 3)); // Output: 8
5console.log(Calculator.subtract(5, 3)); // Output: 2
6console.log(Calculator.multiply(5, 3)); // Output: 15
7console.log(Calculator.divide(5, 3)); // Output: 1.666...

Example 3: Namespace Imports

If a module has many exports and you want to import them all into a single namespace, you can use the * as syntax:

1// utils.ts
2export function log(message: string): void {
3  console.log(message);
4}
5 
6export function warn(message: string): void {
7  console.warn(message);
8}

You can import all exports from utils.ts into a namespace called Utils:

1// app.ts
2import * as Utils from './utils';
3 
4Utils.log('This is a log message');
5Utils.warn('This is a warning message');

What's Next?

In the next section, we'll explore Namespaces, another way to organize code in TypeScript. Namespaces provide a way to group related functionality and help avoid naming conflicts by creating a scope for your declarations.

Stay tuned!