> ## 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.
# 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.
```typescript theme={"dark"}
// constants.ts
// Exporting a declared identifier
const API_BASE_URL = "https://api.example.com";
export default API_BASE_URL;
```
```typescript theme={"dark"}
// mathUtils.ts
// Exporting an anonymous function
export default function(x: number, y: number): number {
return x + y;
}
```
```typescript theme={"dark"}
// database.ts
// Exporting an anonymous class
export default class {
connectionString: string;
constructor(conn: string) {
this.connectionString = conn;
}
}
```
```typescript theme={"dark"}
// 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.
```typescript theme={"dark"}
// 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.
```typescript theme={"dark"}
// 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:**
```typescript theme={"dark"}
// router.ts
export default class Router {}
```
**Compiled CommonJS Output:**
```javascript theme={"dark"}
// 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
