Export syntax variations in Typescript - Mini Project: Build & Apply

Export Syntax Variations in TypeScript

📖 Scenario: You are creating a small TypeScript module that exports different types of values. This is common when you want to share code between files or projects.

🎯 Goal: Learn how to use different export syntax styles in TypeScript by creating variables, functions, and objects, then exporting them in various ways.

📋 What You'll Learn

Create variables and functions with exact names and values

Use named exports and default exports correctly

Use export statements inline and separately

Print the exported values to verify correct export and import

💡 Why This Matters

🌍 Real World

Exporting code is essential for sharing functions, variables, and objects across different files in a project.

💼 Career

Understanding export syntax is important for working on TypeScript projects, libraries, and frameworks where modular code is required.

1

Create variables and functions to export

Create a variable called greeting with the value 'Hello' and a function called sayHello that returns the string 'Hello, World!'.

Typescript

// Create a variable called greeting with value 'Hello'
// Create a function called sayHello that returns 'Hello, World!'

Need a hint?

Use const greeting = 'Hello'; and function sayHello() { return 'Hello, World!'; }.

2

Export variables and functions using named exports

Add named exports for the variable greeting and the function sayHello using the export keyword before their declarations.

Typescript

export const greeting = 'Hello';

export function sayHello() {
    return 'Hello, World!';
}
// Add export keyword before greeting and sayHello declarations

Need a hint?

Put export before the variable and function declarations.

3

Export an object as default export

Create an object called messages with properties welcome set to 'Welcome!' and bye set to 'Goodbye!'. Export this object as the default export using export default.

Typescript

const messages = { welcome: 'Welcome!', bye: 'Goodbye!' };

// Export messages as default export

Need a hint?

Create the object and use export default messages; to export it.

4

Print exported values to verify exports

Write a console.log statement to print greeting, call sayHello(), and print the welcome property of the default exported messages object. Assume all are imported correctly.

Typescript

console.log(greeting);
console.log(sayHello());
console.log(messages.welcome);
// Print greeting, sayHello() result, and messages.welcome

Need a hint?

Use console.log to print the values exactly as shown.