Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt

Use this file to discover all available pages before exploring further.

A default export is an ECMAScript module (ESM) feature supported by TypeScript that designates a single, primary entity—such as a class, function, object, primitive, or type—as the primary export for a given module. Unlike named exports, a default export does not bind the exported entity to a specific identifier during the import phase, allowing the importing module to assign it an arbitrary local identifier.

​
Syntax and Declaration

A module can contain a maximum of one export default statement. The exported entity does not require an internal identifier, permitting the export of anonymous functions and classes. Because a single file represents a single module, each of the following examples must reside in its own distinct file to avoid a TS2528: A module cannot have multiple default exports compilation error. 
// constants.ts
// Exporting a declared identifier
const API_BASE_URL = "https://api.example.com";
export default API_BASE_URL;

// mathUtils.ts
// Exporting an anonymous function
export default function(x: number, y: number): number {
    return x + y;
}

// database.ts
// Exporting an anonymous class
export default class {
    connectionString: string;
    constructor(conn: string) {
        this.connectionString = conn;
    }
}

// types.ts
// Exporting a TypeScript interface/type
export default interface UserConfig {
    theme: 'light' | 'dark';
    retries: number;
}

​
Import Mechanics

When resolving a default export, the import statement omits the named import syntax ({}) required by named exports. The identifier provided in the import declaration is strictly local to the importing module. 
// app.ts
// The local identifiers 'BaseUrl', 'add', 'DbClient', and 'Config' 
// are arbitrarily chosen by the consumer.
import BaseUrl from './constants';
import add from './mathUtils';
import DbClient from './database';
import type Config from './types';

​
Re-exporting Default Exports

TypeScript allows default exports to be aggregated and re-exported from a barrel file. This requires explicitly mapping the imported default to a named export, or re-exporting it as the new module’s default. 
// index.ts
// Re-exporting as a named export
export { default as DatabaseClient } from './database';

// Re-exporting as the default export of the current module
export { default } from './database';

​
Compilation and CommonJS Interoperability

When TypeScript compiles ESM default exports to CommonJS ("module": "commonjs" in tsconfig.json), it mutates the export into a property named default on the exports object. TypeScript Source: 
// router.ts
export default class Router {}
Compiled CommonJS Output: 
// router.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class Router {}
exports.default = Router;
Native CommonJS does not possess a concept of default exports. Consequently, importing standard CommonJS modules that lack a default export (i.e., modules using module.exports) into an ESM context using default import syntax can cause resolution errors. To resolve this, TypeScript provides the esModuleInterop compiler option. When enabled, esModuleInterop allows developers to use ESM default import syntax (import foo from 'bar') on standard CommonJS modules. TypeScript achieves this by synthesizing a default export during type checking and emitting an __importDefault helper function during compilation to wrap the module at runtime.
Master TypeScript with Deep Grasping Methodology!Learn More