ES Modules in TypeScript

Creating a Module

A TypeScript file becomes an ES module the moment it uses import or export; exported declarations become available to other files, while everything else stays private to that file.

Example: Creating a Module

// math.ts
export function square(x: number): number {
  return x * x;
}
const privateHelper = 42; // not exported, stays private

console.log(square(5));

Named Exports

Named exports allow a module to expose multiple declarations at once by writing export in front of each one, and importers choose exactly which named exports they want to bring in.

Example: Named Exports

// shapes.ts
export const PI = 3.14159;
export function circleArea(radius: number): number {
  return PI * radius * radius;
}

console.log(circleArea(2));

Importing Modules

The import statement lets one module use declarations exported by another module; the imported names must match the exported names unless an alias is used to rename them.

Import paths can point to other project files, packages, or built-in Node modules.

Example: Importing Modules

// shapes.ts
export function circleArea(radius: number): number {
  return 3.14159 * radius * radius;
}

// main.ts
// import { circleArea } from "./shapes";
console.log(circleArea(3));

Import Aliases

An imported declaration can be renamed with the as keyword, which is useful when two modules export something under the same name and both need to be imported into the same file.

Example: Import Aliases

// shapes.ts
export function area(radius: number): number {
  return 3.14159 * radius * radius;
}

// main.ts
// import { area as circleArea } from "./shapes";
const circleArea = area;
console.log(circleArea(4));

Module Organization

Modules help organize large applications by keeping related declarations together in their own file; a project's overall structure often mirrors its module boundaries, one concern per file.

Example: Module Organization

// utils/math.ts
export function double(x: number): number {
  return x * 2;
}

// utils/string.ts
export function shout(s: string): string {
  return s.toUpperCase() + "!";
}

console.log(double(5), shout("hi"));