TypeScript export vs default export: What’s the Difference?

By the end of this page, you will understand the difference between named exports and default exports in TypeScript, how they affect import syntax, why the TS1192 error appears, and how to choose the right export style in real code.

TypeScript modules can export values in two common ways:

• Named export using export
• Default export using export default

The important difference is how the value must be imported.

Named export

When you write:

export class MyClass {
  collection = [1, 2, 3];
}

MyClass is a named export. That means other files must import it by its exact exported name using curly braces:

import { MyClass } from './MyClass';

Default export

When you write:

export default class MyClass {
  collection = [1, 2, 3];
}

The module has a default export. That means other files can import it :

Think of a module like a box of tools.

• A named export is like putting labels on specific tools inside the box: hammer, wrench, screwdriver.
• A default export is like saying: "If you take just one main thing from this box, take this one."

Named export

You must ask for the exact labeled tool:

import { MyClass } from './MyClass';

Default export

You are taking the module's main item, so no label lookup is needed:

import MyClass from './MyClass';

If you ask for the default item when the box only contains labeled tools, TypeScript complains. That is what your error means.

Core syntax

Named export

// MyClass.ts
export class MyClass {
  collection = [1, 2, 3];
}

Import it like this:

import { MyClass } from './MyClass';

const item = new MyClass();
console.log(item.collection);

Default export

// MyClass.ts
export default class MyClass {
  collection = [1, 2, 3];
}

Import it like this:

import MyClass from './MyClass';

const item = new ();
.(item.);

Consider this example:

// MyClass.ts
export class MyClass {
  collection = [1, 2, 3];
}

// app.ts
import { MyClass } from './MyClass';

const obj = new MyClass();
console.log(obj.collection);

What happens step by step

1. MyClass.ts defines a class

export class MyClass {

This creates a class named MyClass.

2. export makes it available to other files

Because it uses export, this class becomes a named export of the module.

3. app.ts imports the named export

1. Exporting utility functions

Named exports are common in utility files:

export function formatDate(date: Date) {
  return date.toISOString();
}

export function parseDate(value: string) {
  return new Date(value);
}

This makes it easy to import only what you need:

import { formatDate } from './dateUtils';

2. Exporting one main component or class

Default exports are often used when a file has one primary thing:

export default class UserService {
  getAllUsers() {
    return ['Ava', 'Noah'];
  }
}

Imported like this:

In real projects, the choice between named and default exports is usually based on consistency and team preference.

Common named export patterns

Utility modules

export function isEmail(value: string) {
  return value.includes('@');
}

export function isPasswordStrong(value: string) {
  return value.length >= 8;
}

Validation helpers

export function validateUserName(name: string) {
  if (!name.trim()) {
    throw new Error('Name is required');
  }
}

Re-exporting from index files

export { MyClass }  ;
 {  }  ;

1. Importing a named export as if it were default

Broken code:

// MyClass.ts
export class MyClass {}

// app.ts
import MyClass from './MyClass';

Why it fails:

• MyClass is a named export
• the import expects a default export

Fix:

import { MyClass } from './MyClass';

2. Importing a default export with curly braces

Broken code:

// MyClass.ts
export default class MyClass {}

// app.ts
import { MyClass } from './MyClass';

Fix:

import   ;

Named export vs default export example

Quick rules

• export = named export
• export default = default export
• Named exports are imported with {}
• Default exports are imported without {}
• A file can have many named exports
• A file can have only one default export

Syntax

Named export

export class MyClass {}
import { MyClass } from './MyClass';

Default export

export default class MyClass {}
import MyClass from './MyClass';

Multiple named exports

export const a = 1;
export const b = 2;
 { a, b }  ;

Why do I get "Module has no default export" in TypeScript?

Because you are importing a module as if it had a default export, but the file only exports named values.

Is export default required for classes in TypeScript?

No. Classes can be exported either as named exports or as a default export. The import syntax must match.

Why do some tutorials use export default and others use export?

Because both are valid. Different projects and teachers prefer different module styles.

Can I have both export default and named exports in the same file?

Yes. A file can have one default export and any number of named exports.

Which is better: named exports or default exports?

Neither is always better. Named exports are often preferred in larger codebases for clarity. Default exports are convenient when a file has one main value.

Can I rename imports?

Yes.

For named exports:

import { MyClass as CustomName } from './MyClass';

For default exports:

import CustomName  ;

• ES modules — export and import come from the JavaScript module system.
• Named imports — These are required when a module uses named exports.
• Default imports — These are used when a module has a default export.
• CommonJS — Older module system used in Node.js, often compared with ES modules.
• tsconfig.json — Compiler settings can affect module behavior and interoperability.
• Re-exports — Useful for organizing module APIs through index.ts files.
• Classes in TypeScript — Helpful because many examples export classes.
• Modules and file structure — Understanding how files share code is essential for larger projects.