TypeScript Default Export

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.

Tired of Poor TypeScript Skills? Fix That With Deep Grasping!Learn More

Methods

Functions

Constructors

Classes

Generics

Type Definitions

Decorators

Accessors

Fields

Variables

Parameters

Modules

Namespaces

Enums

Destructuring

Error Handling

Control Flow

Loops

Built-In Object Types

Primitive & Special Types

Comments & Directives

Type Operators

Access Operators

Conditional & Sequence Operators

Logical Operators

Comparison Operators

Unary Operators

Assignment Operators

Arithmetic Operators

Bitwise Operators

TypeScript Default Export

Syntax and Declaration

Import Mechanics

Re-exporting Default Exports

Compilation and CommonJS Interoperability

​Syntax and Declaration

​Import Mechanics

​Re-exporting Default Exports

​Compilation and CommonJS Interoperability

Syntax and Declaration

Import Mechanics

Re-exporting Default Exports

Compilation and CommonJS Interoperability