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

Import syntax variations

📖 Scenario: You are working on a TypeScript project that uses different ways to import modules. Understanding how to import correctly helps you organize your code and use external code easily.

🎯 Goal: You will create a small TypeScript program that imports functions and variables using different import styles and then uses them.

📋 What You'll Learn

Create a module file with named exports

Create a module file with a default export

Import named exports using curly braces

Import default export without curly braces

Use the imported items in simple console.log statements

💡 Why This Matters

🌍 Real World

Modules help organize code in large projects by splitting code into files and importing only what is needed.

💼 Career

Understanding import and export syntax is essential for working with modern TypeScript and JavaScript projects, especially in frameworks and libraries.

1

Create a module with named exports

Create a file called mathUtils.ts with two named exports: a function add that takes two numbers and returns their sum, and a constant PI with the value 3.14.

Typescript

// Your code here

Need a hint?

Use export before the function and constant to make them available outside the file.

2

Create a module with a default export

Create a file called greet.ts with a default export of a function named greet that takes a string name and returns the greeting message `Hello, ${name}!`.

Typescript

// Your code here

Need a hint?

Use export default before the function to export it as the default from the file.

3

Import named exports using curly braces

In a new file called app.ts, import the named exports add and PI from ./mathUtils using curly braces.

Typescript

// Your code here

Need a hint?

Use curly braces to import named exports exactly by their names.

4

Import default export and use all imports

In app.ts, import the default export from ./greet as greet. Then use console.log to print the result of add(5, 7), the value of PI, and the result of greet('Alice').

Typescript

// Your code here

Need a hint?

Default imports do not use curly braces. Use console.log to show the values.