Default exports vs named exports in Typescript - Visual Side-by-Side Comparison

Concept Flow - Default exports vs named exports

Create Module File

↓

Choose Export Type

↓

Default Export

↓

Import Module

↓

Use Exported Value

Shows how a module file exports values either as default or named, and how importing modules access them.

Execution Sample

Typescript

export default function greet() {
  return 'Hello!';
}

export function bye() {
  return 'Goodbye!';
}

Defines a default exported function greet and a named exported function bye in one module.

Execution Table

Step	Action	Export Type	Exported Name	Import Syntax	Resulting Import Value
1	Define greet function	default	greet	import greet from './module';	greet function available
2	Define bye function	named	bye	import { bye } from './module';	bye function available
3	Import default as named	default	greet	import { greet } from './module';	Error: greet not found
4	Import named as default	named	bye	import bye from './module';	Error: default export missing
5	Import both correctly	default + named	greet + bye	import greet, { bye } from './module';	Both functions available

💡 Import errors occur if export/import types do not match; correct syntax is required.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 5
greet	undefined	function greet()	function greet()	function greet()
bye	undefined	undefined	function bye()	function bye()

Key Moments - 3 Insights

Why does importing a default export with curly braces cause an error?

Because default exports are imported without braces, as shown in execution_table row 3 where import { greet } fails.

Can you import a named export without braces?

No, named exports must be imported with braces, as shown in execution_table row 4 where import bye without braces causes an error.

How do you import both default and named exports from the same module?

Use default import without braces and named imports with braces together, as in execution_table row 5.

Visual Quiz - 3 Questions

Look at the execution_table, what happens if you try to import a default export using curly braces?

A It causes an error because default exports are not named.

B It imports but with a different name.

C It imports successfully.

D It imports only if the function is named.

💡 Hint

Check row 3 in execution_table where importing default with braces causes an error.

At which step in the execution_table are both default and named exports imported correctly?

A Step 2

B Step 3

C Step 5

D Step 4

💡 Hint

Look for the row where both greet and bye functions are available after import.

According to variable_tracker, what is the value of 'bye' after step 2?

A undefined

B function bye()

C function greet()

D null

💡 Hint

Check the 'bye' row and the 'After Step 2' column in variable_tracker.

Concept Snapshot

Default exports: one per module, imported without braces.
Named exports: multiple per module, imported with braces.
Import syntax must match export type.
Mix default and named imports with: import defaultName, { named1 } from 'module';
Errors occur if syntax mismatches exports.

Full Transcript

This visual execution shows how TypeScript modules export values either as default or named exports. Default exports are declared with 'export default' and imported without braces. Named exports use 'export' and must be imported with braces. The execution table traces defining functions as default and named exports, and shows import attempts with correct and incorrect syntax. Variable tracker shows how exported functions become available after each step. Key moments clarify common confusions about import syntax errors. The quiz tests understanding of import/export matching and variable states. The snapshot summarizes the rules for default and named exports and imports.