Export syntax variations in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of named export usage?

Consider the following TypeScript module and usage. What will be logged to the console?

Typescript

export const greeting = 'Hello';

// In another file
import { greeting } from './module';
console.log(greeting);

A "greeting"

B undefined

C "Hello"

D ReferenceError

💡 Hint

Think about how named exports and imports work in TypeScript.

The named export 'greeting' is imported correctly and logs the string 'Hello'.

❓ Predict Output

intermediate

What does default export import log?

Given this module and import, what will be the console output?

Typescript

const message = 'Welcome';
export default message;

// In another file
import msg from './module';
console.log(msg);

A undefined

B "Welcome"

C SyntaxError

D "message"

💡 Hint

Default exports can be imported with any name.

The default export is the string 'Welcome'. Importing it as 'msg' logs 'Welcome'.

❓ Predict Output

advanced

What is the output when re-exporting with alias?

Analyze this code snippet. What will be the output of the console.log statement?

Typescript

export const value = 42;
export { value as answer };

// In another file
import { answer } from './module';
console.log(answer);

A ReferenceError

B undefined

C SyntaxError

D 42

💡 Hint

Re-exporting with alias changes the exported name.

The constant 'value' is exported as 'answer'. Importing 'answer' logs 42.

❓ Predict Output

advanced

What error occurs with incorrect export syntax?

What error will this TypeScript code produce?

Typescript

export const x = 10;
export default x;

A SyntaxError: Unexpected token 'export'

B No error, runs fine

C SyntaxError: Missing semicolon

D TypeError: Duplicate export default

💡 Hint

Check if multiple export statements need semicolons or line breaks.

Missing semicolon causes the parser to misinterpret the second export, causing SyntaxError.

🧠 Conceptual

expert

Which export syntax allows exporting multiple items with different names in one statement?

Choose the correct export syntax that exports two variables 'a' and 'b' with aliases 'alpha' and 'beta' respectively in a single export statement.

A export { a as alpha, b as beta };

B export const alpha = a, beta = b;

C export default { alpha: a, beta: b };

D export * from { a as alpha, b as beta };

💡 Hint

Look for the syntax that uses aliasing in export braces.

Option A correctly exports 'a' and 'b' with aliases 'alpha' and 'beta' in one statement.

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