Default exports vs named exports in Typescript - Hands-On Comparison

Default exports vs named exports

📖 Scenario: You are building a small TypeScript project with two modules. One module will export a function as a default export, and the other module will export multiple functions as named exports. You will learn how to create and use both default and named exports.

🎯 Goal: Create a TypeScript project with one module using a default export and another module using named exports. Then import and use these exports in a main file.

📋 What You'll Learn

Create a module file greetDefault.ts with a default exported function called greetDefault that returns the string 'Hello from default export!'.

Create a module file greetNamed.ts with two named exported functions called greetMorning and greetEvening that return 'Good morning!' and 'Good evening!' respectively.

Create a main file main.ts that imports the default export from greetDefault.ts and the named exports from greetNamed.ts.

Call all three functions in main.ts and print their returned strings.

💡 Why This Matters

🌍 Real World

Modules with default and named exports are common in TypeScript projects to organize code and share functionality between files.

💼 Career

Understanding how to use default and named exports is essential for working on modern TypeScript and JavaScript codebases in professional development.

1

Create default export function

Create a file called greetDefault.ts. Inside it, write a function called greetDefault that returns the string 'Hello from default export!'. Export this function as the default export using export default greetDefault.

Typescript

# Create the function greetDefault and export it as default
# Your code here

Need a hint?

Use export default after defining the function to export it as default.

2

Create named export functions

Create a file called greetNamed.ts. Inside it, write two functions: greetMorning that returns 'Good morning!' and greetEvening that returns 'Good evening!'. Export both functions as named exports using export function.

Typescript

# Create two named exported functions greetMorning and greetEvening
# Your code here

Need a hint?

Use export function before each function to export them by name.

3

Import exports in main file

Create a file called main.ts. Import the default export from greetDefault.ts as greetDefault. Also import the named exports greetMorning and greetEvening from greetNamed.ts. Use the import syntax: import greetDefault from './greetDefault' and import { greetMorning, greetEvening } from './greetNamed'.

Typescript

# Import greetDefault as default import
# Import greetMorning and greetEvening as named imports
# Your code here

Need a hint?

Use default import syntax without braces and named import syntax with braces.

4

Call functions and print results

In main.ts, call the functions greetDefault(), greetMorning(), and greetEvening(). Print their returned strings using console.log.

Typescript

# Call greetDefault(), greetMorning(), greetEvening() and print their results
# Your code here

Need a hint?

Use console.log to print each function's return value on its own line.