TypeScript Named Export

A named export is an ECMAScript module syntax mechanism, fully supported and extended by TypeScript, that allows multiple specific declarations—such as variables, functions, classes, types, or interfaces—to be exposed from a module using their exact identifier names. Unlike default exports, a single module can contain an arbitrary number of named exports. Importing modules must reference these exact identifiers or explicitly alias them during the import phase.

Inline Named Exports

The most common approach is prefixing the declaration directly with the export keyword. TypeScript allows this for both runtime values and compile-time types.

export const MAX_RETRIES = 3;

export function initializeClient(): void { 
  // implementation
}

export interface ClientConfig {
  timeout: number;
}

Export Clause and Aliasing

Identifiers can be declared first and exported later at the bottom of the module using an export clause. The as keyword allows you to rename the identifier as it is exposed to consumers.

const internalState = { initialized: false };
function resetState(): void { 
  // implementation
}

export { internalState, resetState as clearState };

TypeScript-Specific: Type-Only Exports

TypeScript introduces the type modifier for named exports. This explicitly instructs the TypeScript compiler that the exported identifier is a type or interface, ensuring it is completely erased during the JavaScript emit phase. This is critical when using compiler options like isolatedModules or verbatimModuleSyntax.

interface User { 
  id: string; 
}
type UserRole = 'admin' | 'guest';

// Exporting strictly as types
export type { User, UserRole };

The type modifier can also be applied inline within a mixed export clause:

export { internalState, type User, type UserRole };

Re-exporting (Aggregation)

Named exports can be forwarded from one module to another without importing them into the current module’s scope.

// Re-export all named exports directly (excluding default exports)
export * from './client';

// Re-export specific named exports
export { MAX_RETRIES, type ClientConfig } from './client';

// Re-export a named export with an alias
export { initializeClient as init } from './client';

// Re-export all named exports from a module as a single named namespace
export * as ClientModule from './client';

Importing Named Exports

To consume a named export, the importing module uses static import syntax. While it utilizes curly braces, this is not object destructuring; instead, it creates read-only live bindings to the exported variables rather than evaluating runtime value copies. The exact exported identifier must be referenced, optionally applying local aliases using the as keyword.

import { 
  MAX_RETRIES, 
  clearState as reset, 
  type ClientConfig 
} from './module';

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 Named Export

Inline Named Exports

Export Clause and Aliasing

TypeScript-Specific: Type-Only Exports

Re-exporting (Aggregation)

Importing Named Exports

​Inline Named Exports

​Export Clause and Aliasing

​TypeScript-Specific: Type-Only Exports

​Re-exporting (Aggregation)

​Importing Named Exports

Inline Named Exports

Export Clause and Aliasing

TypeScript-Specific: Type-Only Exports

Re-exporting (Aggregation)

Importing Named Exports