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.