Default and Named Exports

Default and Named Exports

A comprehensive guide to Default and Named Exports in Typescript. Learn about exporting and importing modules with clear explanations. Perfect for beginners starting with Typescript.

Introduction

When working on larger Typescript projects, organizing your code into modules becomes essential for maintainability and reusability. Typescript supports two main ways to export and import modules: default exports and named exports. Understanding the difference between these approaches and when to use each is crucial for effective module management.

In this guide, we'll dive deep into default and named exports in Typescript. You'll learn the syntax, best practices, and common pitfalls to avoid. By the end, you'll have a solid foundation for structuring your Typescript projects using modules.

Core Concepts

In Typescript, modules are created using the export keyword. There are two primary ways to export from a module:

1. Default Exports:

   • Use export default followed by a function, class, or variable.
   • Each module can have only one default export.
   • Importing a default export allows you to choose any name for the imported value.

   Example:

   // myModule.ts
   export default function myFunction() {
     // ...
   }

2. Named Exports:

   • Use export followed by a function, class, or variable declaration.
   • A module can have multiple named exports.
   • Importing named exports requires using the exact name or an alias.

   Example:

   // myModule.ts
   export function myFunction() {
     // ...
   }
   
   export const myConstant = 42;

Implementation Details

To export a value as the default export:

1. Declare the function, class, or variable you want to export.
2. Prefix the declaration with export default.

To export named values:

1. Declare the functions, classes, or variables you want to export.
2. Prefix each declaration with export.

When importing modules, use the import keyword followed by the exported names:

// Importing a default export
import myDefaultExport from './myModule';

// Importing named exports
import { myFunction, myConstant } from './myModule';

// Importing named exports with aliases
import { myFunction as myAlias } from './myModule';

Best Practices

• Use default exports for the main functionality of a module.
• Use named exports for related utility functions or constants.
• Avoid mixing default and named exports in the same module for clarity.
• Use descriptive names for exported values to improve code readability.

Common Pitfalls

• Forgetting to include the export keyword when declaring exported values.
• Attempting to have multiple default exports in a single module.
• Importing named exports without using the exact name or an alias.
• Circular dependencies between modules can lead to issues.

Practical Examples

Here's an example of a module that exports a default function and named constants:

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

export const PI = 3.14159;
export const E = 2.71828;

Importing and using the module:

// main.ts
import add, { PI, E } from './mathUtils';

console.log(add(2, 3)); // Output: 5
console.log(PI); // Output: 3.14159
console.log(E);  // Output: 2.71828

Summary and Next Steps

In this guide, we explored default and named exports in Typescript. We covered the core concepts, implementation details, best practices, and common pitfalls. You learned how to export values using export default and export, and how to import them using the import keyword.

To further enhance your understanding of modules in Typescript, consider exploring the following topics:

• Re-exporting modules
• Importing types and interfaces
• Dynamic imports
• Module resolution strategies

By mastering modules and project organization in Typescript, you'll be able to create maintainable and scalable codebases. Happy coding!