Typescript Modules For Organizing And Sharing Code Effectively

This post will is 8 of 20 for my series on intermediate-to-advance TypeScript tips.

All tips can be run on the TypeScript Playground.

Introduction

In this blog post, we will delve into the world of TypeScript modules, a powerful feature that allows developers to organize and share code effectively. Modules in TypeScript are a way to encapsulate code in separate files and namespaces, which can then be imported and used in other modules. This promotes code reuse and separation of concerns, making your codebase easier to manage and understand. This post is based on the official TypeScript documentation on modules, which you can find here.

Understanding TypeScript Modules

In TypeScript, any file containing a top-level import or export is considered a module. Modules are executed within their own scope, not in the global scope, which means that variables, functions, classes, etc. declared in a module are not visible outside the module unless they are explicitly exported.

Here's a simple example of a TypeScript module:

// StringValidator.ts
export interface StringValidator {
  isAcceptable(s: string): boolean;
}

In the above example, we declare an interface StringValidator and export it. This interface can now be imported in another module like so:

// ZipCodeValidator.ts
import { StringValidator } from "./StringValidator";

export class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string) {
    return s.length === 5 && /^[0-9]+$/.test(s);
  }
}

In ZipCodeValidator.ts, we import the StringValidator interface from StringValidator.ts and implement it in the ZipCodeValidator class.

Importing and Exporting in Modules

There are several ways to import and export entities in TypeScript modules. Here are some examples:

Default Exports

Each module can optionally export a default export. Default exports are marked with the keyword default, and there can only be one default export per module. Default exports are imported using a different import form.

// MyClass.ts
export default class SomeType {
  constructor() { ... }
}

You can import the default export like this:

// Consumer.ts
import SomeType from "./MyClass";
let x = new SomeType();

Named Exports

You can also export multiple entities from a module by naming them:

// MyThings.ts
export class SomeType {
  /* ... */
}
export function someFunc() {
  /* ... */
}

And import them like this:

// Consumer.ts
import { SomeType, someFunc } from "./MyThings";
let x = new SomeType();
let y = someFunc();

Summary

Modules in TypeScript provide a robust way to organize and share code. They encapsulate code in separate files and namespaces, which can then be imported and used in other modules. This promotes code reuse and separation of concerns. TypeScript offers a variety of ways to import and export entities, including default exports and named exports, giving developers flexibility in how they structure their code.