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!'

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

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

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

Hint

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

Practice

1. Which of the following is the correct way to export a function named calculate as a named export in TypeScript?

easy

A. module.exports = calculate;

B. export default function calculate() { /*...*/ }

C. export = calculate;

D. export function calculate() { /*...*/ }

Solution

1. Step 1: Understand named export syntax

   Named exports use the keyword export before the declaration to share multiple items.

2. Step 2: Identify correct syntax for named function export

   The syntax export function calculate() {} correctly exports the function as named export.

3. Final Answer:

   export function calculate() { /*...*/ } -> Option D

4. Quick Check:

   Named export uses export before declaration [OK]

Hint: Use 'export' before function for named export [OK]

Common Mistakes:

• Confusing default export with named export
• Using CommonJS syntax like module.exports
• Using 'export =' which is for different module style

2. Which of the following is the correct syntax to export a constant named PI as the default export in TypeScript?

easy

A. export const default PI = 3.14;

B. const PI = 3.14; export default PI;

C. export default const PI = 3.14;

D. export PI = 3.14;

Solution

1. Step 1: Understand default export syntax

   Default export can export a value or variable by writing export default followed by the value or variable.

2. Step 2: Identify correct way to export constant as default

   We first declare const PI = 3.14; then export it as default using export default PI;.

3. Final Answer:

   const PI = 3.14; export default PI; -> Option B

4. Quick Check:

   Default export uses 'export default' after declaration [OK]

Hint: Declare first, then export default variable [OK]

Common Mistakes:

• Trying to combine 'const' and 'default' in one statement incorrectly
• Using 'export const default' which is invalid
• Confusing named export with default export syntax

3. What will be the output of the following TypeScript code?

export const a = 5;
export const b = 10;

import * as values from './module';
console.log(values.a + values.b);

medium

A. 15

B. undefinedundefined

C. Error: Cannot use import statement outside a module

D. NaN

Solution

1. Step 1: Understand named exports and import * syntax

   The code exports two constants a and b as named exports. The import statement imports all exports as an object named values.

2. Step 2: Calculate the sum of imported values

   Accessing values.a and values.b gives 5 and 10 respectively. Their sum is 15.

3. Final Answer:

   15 -> Option A

4. Quick Check:

   Named exports imported as object sum correctly [OK]

Hint: Import * as object to access all named exports [OK]

Common Mistakes:

• Expecting default export when none is present
• Confusing import syntax causing runtime errors
• Assuming imported values are undefined

4. Identify the error in the following TypeScript export code:

const name = "Alice";
export { name as default };

medium

A. The variable 'name' must be declared with 'export' keyword.

B. The export statement is missing a semicolon.

C. You cannot rename a named export to default in this way.

D. There is no error; this code is correct.

Solution

1. Step 1: Understand export renaming rules

   Renaming exports is allowed, but renaming a named export to default using this syntax is invalid in TypeScript.

2. Step 2: Identify correct way to export default with rename

   To export a variable as default, use export default name; instead of renaming in braces.

3. Final Answer:

   You cannot rename a named export to default in this way. -> Option C

4. Quick Check:

   Default export must use 'export default' syntax [OK]

Hint: Use 'export default' for default export, not rename [OK]

Common Mistakes:

• Trying to rename named export to default inside braces
• Confusing export syntax for default and named exports
• Assuming semicolon omission causes error

5. Given the following module code:

const x = 1;
const y = 2;
const z = 3;

export { x as default, y, z };

Which import statement correctly imports x as default and y and z as named imports?

hard

A. import x, { y, z } from './module';

B. import { default as x, y, z } from './module';

C. import { x, y, z } from './module';

D. import * as all from './module';

Solution

1. Step 1: Understand export renaming and import syntax

   The module exports x renamed as default, and y, z as named exports.

2. Step 2: Identify correct import syntax for default and named exports

   To import default export as x and named exports y, z, use import x, { y, z } from './module';.

3. Final Answer:

   import x, { y, z } from './module'; -> Option A

4. Quick Check:

   Default import first, then named in braces [OK]

Hint: Default import first, named imports in braces [OK]

Common Mistakes:

• Using named import syntax for default export
• Trying to import default as named
• Using import * without destructuring