Default exports vs named exports in Typescript - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of importing default export

What will be the output of this TypeScript code when run?

Typescript

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

import greet from './module';
console.log(greet());

A "Hello from default export!"

B TypeError: greet is not a function

C undefined

D SyntaxError: Unexpected token import

💡 Hint

Default exports can be imported with any name without braces.

The function is exported as default and imported without braces, so calling greet() works and returns the string.

❓ Predict Output

intermediate

Output of importing named export

What will be the output of this TypeScript code when run?

Typescript

export function greet() {
  return "Hello from named export!";
}

import { greet } from './module';
console.log(greet());

A SyntaxError: Unexpected token import

B TypeError: greet is not a function

C undefined

D "Hello from named export!"

💡 Hint

Named exports must be imported with braces and exact names.

The function is exported as a named export and imported with braces using the same name, so calling greet() returns the string.

❓ Predict Output

advanced

What happens if you import a named export as default?

Given this module code, what will be the output or error when running the import code?

Typescript

export function greet() {
  return "Hello!";
}

import greet from './module';
console.log(greet());

A "Hello!"

B SyntaxError: Cannot use import statement outside a module

C TypeError: greet is not a function

D undefined

💡 Hint

Default import expects a default export, but only named export exists.

Since the module exports greet as a named export, importing it as default results in greet being undefined or an object, causing a TypeError when called.

🧠 Conceptual

advanced

Difference in importing multiple named exports vs default export

Which statement correctly describes the difference between importing multiple named exports and a default export in TypeScript?

A Named exports can only be imported one at a time; default exports can import multiple items.

B Multiple named exports must be imported with braces and exact names; default export is imported without braces and can be renamed freely.

C Both default and named exports must be imported with braces and exact names.

D Default exports must be imported with braces; named exports are imported without braces.

💡 Hint

Think about how you write import statements for default vs named exports.

Named exports require braces and exact names; default exports do not use braces and can be renamed on import.

❓ Predict Output

expert

Output of combined default and named exports import

What will be the output of this TypeScript code when run?

Typescript

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

export function greetNamed() {
  return "Hello from named!";
}

import greet, { greetNamed } from './module';
console.log(greet());
console.log(greetNamed());

A

"Hello from default!"
"Hello from named!"

B

"Hello from named!"
"Hello from default!"

C TypeError: greet is not a function

D SyntaxError: Unexpected token import

💡 Hint

You can import default and named exports together in one statement.

The default export is imported as greet without braces; the named export greetNamed is imported with braces. Both functions return their respective strings.

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