Organizing Code with TypeScript Modules

In the previous articles, we explored TypeScript types, interfaces, classes, and generics. In this article, we will discuss how to organize your TypeScript code using modules. Modules help you keep your code organized, maintainable, and easier to understand by breaking it into smaller, focused pieces.

Exporting and Importing

In TypeScript, you can use the export keyword to make a class, function, or variable available to other modules. To use the exported members in another module, you need to use the import keyword.

Here's an example of exporting and importing:

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

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

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

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

Default Exports

In addition to named exports, TypeScript also supports default exports. A module can have only one default export, which can be imported without using curly braces. Default exports are useful when a module has a single primary purpose or a main function or class that should be used by default.

Here's an example of using default exports:

// greeter.ts
export default class Greeter {
  constructor(private message: string) {}

  greet(): string {
    return this.message;
  }
}

// main.ts
import Greeter from "./greeter";

const greeter = new Greeter("Hello, world!");
console.log(greeter.greet()); // Output: 'Hello, world!'

Wildcard Imports

If a module has many exports, you can use the wildcard syntax to import all of them at once. This can be useful when you need to use multiple exports from a module or when you want to import everything under a single namespace.

Here's an example of using wildcard imports:

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

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

// main.ts
import * as math from "./math";

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

Conclusion

In this article, we covered organizing code with TypeScript modules, including exporting and importing, default exports, and wildcard imports. By using modules, you can better organize your TypeScript code, making it more maintainable and easier to understand. In the next article, we will explore advanced TypeScript types and techniques.

Programming 101