Skip to main content

Modules in TypeScript

In this tutorial, we will explore modules in TypeScript. Understanding how to use modules effectively will help you organize and manage your code, enabling better collaboration and maintainability.

Creating a Module​

In TypeScript, a module is a file that contains code. To create a module, simply write your TypeScript code in a new file with the .ts extension.

For example, create a file named math.ts:

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

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

In this example, we create a module named math that exports two functions: add and subtract.

Importing a Module​

To use a module in another file, you can import it using the import statement:

TypeScript
import { add, subtract } from './math';

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

In this example, we import the add and subtract functions from the math module and use them in our code.

Exporting​

Exporting allows you to make elements from a module available for use in other modules. You can export variables, functions, classes, interfaces, and types.

Named Exports​

Named exports allow you to export elements by name:

TypeScript
// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

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

In this example, we create a module named math that exports two functions: add and subtract.

Default Exports​

Each module can have a default export, which is the main export of the module:

TypeScript
// math.ts
export default function multiply(a: number, b: number): number {
  return a * b;
}

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

In this example, we set the multiply function as the default export of the math module.

Importing​

Importing allows you to use elements from other modules in your current module.

Importing Named Exports​

To import named exports, use the import statement with curly braces:

TypeScript
// main.ts
import { add, subtract } from './math';

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

In this example, we import the add and subtract functions from the math module and use them in our code.

Importing Default Exports​

To import a default export, use the import statement without curly braces:

TypeScript
// main.ts
import multiply, { add } from './math';

console.log(multiply(3, 4)); // Output: 12
console.log(add(1, 2)); // Output: 3

In this example, we import the default export multiply and the named export add from the math module.

Namespace Imports​

You can import all the exports of a module into a single object using a namespace import:

TypeScript
import * as MathUtils from './math';

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

In this example, we import all the exports of the math module into a single object named MathUtils.

Conclusion​

In this tutorial, we have explored modules in TypeScript. Understanding how to create, export, and import modules effectively will enable you to organize and manage your code, improving collaboration and maintainability.