25. Importing and Exporting Modules

```html

In the realm of modern web development, modularity is a key principle that promotes code reusability, maintainability, and organization. TypeScript, being a superset of JavaScript, embraces this principle through its robust support for modules. The concept of modules in TypeScript is closely tied to JavaScript's module systems, particularly ES6 modules, which have become the standard in the JavaScript ecosystem. Understanding how to import and export modules in TypeScript is crucial for building scalable and efficient applications.

Understanding Modules

Modules in TypeScript are essentially files that contain code, and each module has its own scope. Unlike the traditional script tag approach, where all code shares the same global scope, modules help in encapsulating code within a file. This encapsulation prevents variable name clashes and allows developers to control what parts of the code are exposed to other parts of the application.

TypeScript supports two main module systems: CommonJS and ES6 modules. CommonJS is the module system used by Node.js, while ES6 modules are the standard for modern JavaScript. TypeScript allows you to use both, but for the purpose of this discussion, we will focus on ES6 modules, which are more commonly used in front-end development.

Exporting Modules

Exporting in TypeScript is the process of making variables, functions, classes, or interfaces available to other modules. There are several ways to export items from a module:

Named Exports

Named exports allow you to export multiple items from a module. Each item can be imported by its name in other modules. Here's an example:

export const pi = 3.14;
export function calculateArea(radius: number): number {
    return pi * radius * radius;
}
export class Circle {
    constructor(public radius: number) {}
    getArea() {
        return calculateArea(this.radius);
    }
}

In the above example, we have exported a constant pi, a function calculateArea, and a class Circle. All these exports can be imported individually in other modules.

Default Exports

Default exports are used when a module exports a single item. This item can be imported without knowing its name. Here's an example:

export default class Rectangle {
    constructor(public width: number, public height: number) {}
    getArea() {
        return this.width * this.height;
    }
}

In this case, the Rectangle class is the default export of the module. It can be imported without using curly braces.

Importing Modules

Importing in TypeScript is the process of bringing exported items from other modules into the current module. There are different ways to import modules, depending on how they were exported.

Importing Named Exports

To import named exports, you use curly braces to specify the names of the items you want to import. Here's how you can import the named exports from the previous example:

import { pi, calculateArea, Circle } from './mathUtils';

In this example, we import the pi constant, the calculateArea function, and the Circle class from the mathUtils module.

Importing Default Exports

When importing a default export, you don't need to use curly braces. You can give the imported item any name you like. Here's an example:

import Rectangle from './rectangleUtils';

Here, we import the default export from the rectangleUtils module and assign it the name Rectangle.

Importing All Exports

If you want to import all exports from a module as a single object, you can use the * as syntax. This is useful when you want to access multiple exports from a module without importing them individually. Here's an example:

import * as MathUtils from './mathUtils';

const area = MathUtils.calculateArea(5);
const circle = new MathUtils.Circle(5);

In this example, we import all the exports from the mathUtils module as a single object named MathUtils. We can then access the exports using dot notation.

Re-exporting Modules

TypeScript also allows you to re-export items from another module. This can be useful for creating a module that aggregates exports from multiple modules. Here's an example:

export { pi, calculateArea, Circle } from './mathUtils';
export { default as Rectangle } from './rectangleUtils';

In this example, we re-export the named exports from mathUtils and the default export from rectangleUtils. Other modules can now import these exports from a single module.

Dynamic Imports

TypeScript supports dynamic imports, which allow you to load modules asynchronously. This can be useful for code-splitting and lazy loading. Here's an example:

async function loadMathUtils() {
    const { calculateArea } = await import('./mathUtils');
    console.log(calculateArea(5));
}

loadMathUtils();

In this example, the import function is used to dynamically import the mathUtils module. The calculateArea function is then used after the module has been loaded.

Conclusion

Importing and exporting modules in TypeScript is a fundamental concept that enhances code organization and reusability. By understanding how to use named exports, default exports, and dynamic imports, you can create modular and maintainable codebases. As you continue to work with TypeScript, you'll find that mastering modules is essential for building scalable applications.

```

Next page of the Free Ebook:

41Advanced Module Configurations

7 minutes