Default exports vs named exports in Typescript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export the function as the default export.

Typescript

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

Drag options to blanks, or click blank then click option'

Adefault

Bnamed

Cexported

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'named' instead of 'default' causes syntax errors.

Forgetting the export keyword entirely.

The keyword default is used to export a single default export from a module.

2fill in blank

medium

Complete the code to import the default export from the module.

Typescript

import [1] from './greet';
console.log([1]());

Drag options to blanks, or click blank then click option'

A{ greet }

B{ default }

C* as greet

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces for default imports causes errors.

Using '* as' syntax when not needed.

When importing a default export, you use a simple name without braces.

3fill in blank

hard

Fix the error in importing a named export from the module.

Typescript

[1]
console.log(greet());

Drag options to blanks, or click blank then click option'

Aimport * as greet from './greet';

Bimport greet from './greet';

Cimport { greet } from './greet';

Dimport default from './greet';

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import named exports without braces.

Using 'default' keyword incorrectly in import.

Named exports must be imported using curly braces around the exact exported name.

4fill in blank

hard

Fill both blanks to export two named functions from the module.

Typescript

export function [1]() {
  return 'Hello';
}

export function [2]() {
  return 'Goodbye';
}

Drag options to blanks, or click blank then click option'

AsayHello

Bdefault

CsayGoodbye

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'default' as a function name for named exports.

Using the same name for both functions.

Named exports can be multiple functions with their own names.

5fill in blank

hard

Fill all three blanks to import a default export and two named exports from the module.

Typescript

import [1], { [2], [3] } from './messages';

console.log([1]());
console.log([2]());
console.log([3]());

Drag options to blanks, or click blank then click option'

AdefaultGreet

BsayHello

CsayGoodbye

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Putting named imports without braces.

Using wrong names for the imports.

You can import a default export with a name, and named exports inside curly braces.