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.

Practice

1. What is the main difference between default export and named exports in TypeScript?

easy

A. Default export requires curly braces when importing, named exports do not.

B. Default export allows exporting one main value per file, named exports allow multiple exports by name.

C. Named exports can only export functions, default exports can only export objects.

D. Default exports are deprecated in TypeScript, named exports are preferred.

Solution

1. Step 1: Understand default export purpose

   Default export is designed to export a single main value from a file, like a main function or class.

2. Step 2: Understand named exports purpose

   Named exports allow exporting multiple values by their names, so you can import only what you need.

3. Final Answer:

   Default export allows exporting one main value per file, named exports allow multiple exports by name. -> Option B

4. Quick Check:

   Default export = one main, Named exports = multiple [OK]

Hint: Default = one main export, named = many exports by name [OK]

Common Mistakes:

• Confusing import syntax for default and named exports
• Thinking default export can export multiple items
• Assuming named exports require default keyword

2. Which of the following is the correct syntax to import a default export from a module named utils.ts?

easy

A. import utils from './utils';

B. import { utils } from './utils';

C. import * as utils from './utils';

D. import utils = require('./utils');

Solution

1. Step 1: Recall default import syntax

   Default exports are imported without curly braces using the syntax: import name from 'module'.

2. Step 2: Check options for correct syntax

   import utils from './utils'; matches this syntax exactly, importing the default export as utils.

3. Final Answer:

   import utils from './utils'; -> Option A

4. Quick Check:

   Default import has no braces [OK]

Hint: Default imports have no curly braces [OK]

Common Mistakes:

• Using curly braces for default imports
• Confusing import * as with default import
• Using require syntax in ES modules

3. Given the following module mathUtils.ts:

export default function add(a: number, b: number) { return a + b; }
export function multiply(a: number, b: number) { return a * b; }

What will be the output of this code?

import add, { multiply } from './mathUtils';
console.log(add(2, 3));
console.log(multiply(2, 3));

medium

A. NaN and 6

B. Syntax error

C. 5 and undefined

D. 5 and 6

Solution

1. Step 1: Understand import statements

   The default export function add is imported without braces, and the named export multiply is imported with braces.

2. Step 2: Evaluate function calls

   add(2, 3) returns 5, and multiply(2, 3) returns 6, so console logs 5 and 6.

3. Final Answer:

   5 and 6 -> Option D

4. Quick Check:

   Default + named import works = 5 and 6 [OK]

Hint: Default import no braces, named import with braces [OK]

Common Mistakes:

• Importing default export with braces
• Calling undefined functions due to wrong import
• Confusing output values

4. Consider this code snippet:

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

What is the problem here?

medium

A. There is no problem; this code works fine.

B. Default export must be a variable, not a function.

C. You cannot have two functions with the same name exported, even if one is default.

D. Named exports cannot be functions.

Solution

1. Step 1: Identify duplicate function names

   Both the default export and named export use the same function name greet, which causes a conflict.

2. Step 2: Understand export rules

   Exports must have unique names; default export can be anonymous or named but cannot clash with named exports.

3. Final Answer:

   You cannot have two functions with the same name exported, even if one is default. -> Option C

4. Quick Check:

   Duplicate export names cause error [OK]

Hint: Default and named exports cannot share the same name [OK]

Common Mistakes:

• Assuming default export must be anonymous
• Thinking named exports can't be functions
• Ignoring duplicate export names

5. You have a file shapes.ts exporting multiple shapes and a default export for the main shape:

export interface Circle { radius: number; }
export interface Square { side: number; }
const defaultShape = { type: 'circle', radius: 5 };
export default defaultShape;

How would you import both the default shape and the Square interface correctly in another file?

hard

A. import defaultShape, { Square } from './shapes';

B. import { defaultShape, Square } from './shapes';

C. import { defaultShape } from './shapes'; import Square from './shapes';

D. import * as shapes from './shapes';

Solution

1. Step 1: Import default export without braces

   The default export defaultShape is imported without curly braces.

2. Step 2: Import named export with braces

   The named export Square interface is imported with curly braces.

3. Final Answer:

   import defaultShape, { Square } from './shapes'; -> Option A

4. Quick Check:

   Default no braces, named with braces [OK]

Hint: Default import no braces, named imports with braces [OK]

Common Mistakes:

• Using braces for default import
• Trying to import default as named
• Confusing import * as with default import