TypeScript Default Exports

In TypeScript, default exports allow you to export a single entity from a module as the default export. This is especially useful when a module is meant to export one main functionality or class. Default exports can be imported without using curly braces and can be renamed during the import process.

 

What is Default Export?

A default export is used when you want to export a single component from a module as the primary export. When importing, you do not need to use curly braces, and you can rename the imported entity as needed.

 

Exporting Default in TypeScript

To export a default entity, you use the export default keyword. This can be applied to functions, classes, variables, or objects.

Example 1: Exporting a Function as Default

// file: add.ts

export default function add(x: number, y: number): number {
  return x + y;
}

• In this case, the add function is exported as the default export from the add.ts module.

Example 2: Exporting a Class as Default

// file: Calculator.ts

export default class Calculator {
  static multiply(x: number, y: number): number {
    return x * y;
  }
}

• Here, the Calculator class is exported as the default export.

Example 3: Exporting an Object as Default

// file: config.ts

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

export default config;

• This exports an object config as the default export.

 

Importing Default Exports in TypeScript

When importing from a module that has a default export, you do not need curly braces, and you can assign the imported entity a name of your choice.

Example 1: Importing a Default Export (Function)

// file: app.ts
import add from './add';

console.log(add(5, 3)); // Output: 8

• The add function is imported from the add.ts module, and you can use it directly without curly braces.

Example 2: Importing a Default Export (Class)

// file: app.ts
import Calculator from './Calculator';

console.log(Calculator.multiply(5, 3)); // Output: 15

• The Calculator class is imported from Calculator.ts as a default export.

Example 3: Importing a Default Export (Object)

// file: app.ts
import config from './config';

console.log(config.apiUrl); // Output: https://api.example.com

• The config object is imported as a default export and accessed directly.

 

Renaming Default Imports

When importing a default export, you can rename the imported entity to fit your context or avoid naming conflicts.

Example: Renaming Default Import

// file: app.ts
import sum from './add';

console.log(sum(5, 3)); // Output: 8

• Here, the add function is renamed to sum during the import.

 

Default Export vs Named Exports

While default exports are used to export a single entity from a module, named exports allow you to export multiple entities from a module. You can use both in the same module, but you cannot combine them in a single export statement.

Example: Using Default and Named Exports Together

// file: math.ts

export default function add(x: number, y: number): number {
  return x + y;
}

export const pi = 3.1415;
export const e = 2.718;

• Here, add is the default export, and pi and e are named exports.

// file: app.ts
import add, { pi, e } from './math';

console.log(add(5, 3)); // Output: 8
console.log(pi);         // Output: 3.1415
console.log(e);          // Output: 2.718

• In this case, add is imported as the default export, while pi and e are imported as named exports.

 

Summary

• Default Exports: Export a single entity as the main export of the module using export default.
• Importing Default Exports: You can import default exports without curly braces and rename them during the import.
• Multiple Exports: A module can have both default exports and named exports.
• Renaming Imports: Default imports can be renamed to fit your requirements.

Default exports are ideal when a module has one primary function or class to export, making it easier to import and use in other parts of your application.