Re-exporting modules in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this re-export example?

Consider these two TypeScript files:

/* file: mathUtils.ts */
export function add(a: number, b: number) { return a + b; }
export function sub(a: number, b: number) { return a - b; }

/* file: index.ts */
export { add } from './mathUtils';

What will be the result of this code?

import { add, sub } from './index';
console.log(add(5, 3));
console.log(typeof sub);

Typescript

/* mathUtils.ts */
export function add(a: number, b: number) { return a + b; }
export function sub(a: number, b: number) { return a - b; }

/* index.ts */
export { add } from './mathUtils';

/* main.ts */
import { add, sub } from './index';
console.log(add(5, 3));
console.log(typeof sub);

A 8\nfunction

B Error: 'sub' is not exported from './index'

C 8\nundefined

D 8\nnumber

💡 Hint

Check what is actually exported from index.ts.

The index.ts file only re-exports add. The sub function is not exported from index.ts, so attempting to import it causes an error: Error: 'sub' is not exported from './index'.

❓ Predict Output

intermediate

What does this wildcard re-export produce?

Given these files:

/* file: helpers.ts */
export const greet = () => 'Hello';
export const bye = () => 'Goodbye';

/* file: index.ts */
export * from './helpers';

What will this code print?

import { greet, bye } from './index';
console.log(greet());
console.log(bye());

Typescript

/* helpers.ts */
export const greet = () => 'Hello';
export const bye = () => 'Goodbye';

/* index.ts */
export * from './helpers';

/* main.ts */
import { greet, bye } from './index';
console.log(greet());
console.log(bye());

A Hello\nGoodbye

B Error: Cannot find module './helpers'

C undefined\nGoodbye

D Hello\nundefined

💡 Hint

Remember what export * from does.

The export * from './helpers' re-exports all exports from helpers.ts. So both greet and bye are available from index.ts. The calls print 'Hello' and 'Goodbye'.

🔧 Debug

advanced

Why does this re-export cause a runtime error?

Look at these files:

/* file: data.ts */
const secret = 42;
export default secret;

/* file: index.ts */
export { secret } from './data';

What error will occur when importing secret from index.ts?

import { secret } from './index';
console.log(secret);

Typescript

/* data.ts */
const secret = 42;
export default secret;

/* index.ts */
export { secret } from './data';

/* main.ts */
import { secret } from './index';
console.log(secret);

A SyntaxError: Unexpected token 'export'

B undefined

C RuntimeError: Cannot find export 'secret' in './data'

D 42

💡 Hint

Check how default exports are re-exported.

The data.ts file exports secret as a default export. The index.ts tries to re-export a named export secret, which does not exist. This causes a runtime error when importing secret from index.ts.

📝 Syntax

advanced

Which option correctly re-exports a default export?

Given data.ts with a default export:

export default function greet() { return 'Hi'; }

Which of these index.ts files correctly re-exports the default export as a named export greet?

Typescript

/* data.ts */
export default function greet() { return 'Hi'; }

/* index.ts */
// Choose the correct re-export syntax

A export default { greet } from './data';

B export { greet } from './data';

C export * from './data';

D export { default as greet } from './data';

💡 Hint

How do you rename a default export when re-exporting?

Option D uses the correct syntax to re-export the default export as a named export called greet. Option D tries to re-export a named export greet which does not exist. Option D re-exports all named exports but not the default. Option D is invalid syntax.

🚀 Application

expert

How many exports does this module have after re-exporting?

Consider these files:

/* file: a.ts */
export const a1 = 1;
export const a2 = 2;

/* file: b.ts */
export const b1 = 'b';
export const b2 = 'bb';

/* file: index.ts */
export * from './a';
export { b1 } from './b';

How many named exports does index.ts have?

Typescript

/* a.ts */
export const a1 = 1;
export const a2 = 2;

/* b.ts */
export const b1 = 'b';
export const b2 = 'bb';

/* index.ts */
export * from './a';
export { b1 } from './b';

A 3

B 4

C 2

D 5

💡 Hint

Count all named exports re-exported by index.ts.

index.ts re-exports all exports from a.ts (which are a1 and a2) plus only b1 from b.ts. So total named exports are 3.

Practice

1. What is the main purpose of re-exporting modules in TypeScript?

easy

A. To organize and simplify imports by sharing exports from one place

B. To create new variables inside a module

C. To run code automatically when a module loads

D. To prevent modules from being imported multiple times

Solution

1. Step 1: Understand re-exporting concept

   Re-exporting means exporting items from one module through another to simplify imports.

2. Step 2: Identify the main benefit

   This helps organize code and makes importing easier by centralizing exports.

3. Final Answer:

   To organize and simplify imports by sharing exports from one place -> Option A

4. Quick Check:

   Re-exporting = Simplify imports [OK]

Hint: Re-exporting centralizes exports for easier imports [OK]

Common Mistakes:

• Thinking re-exporting creates new variables
• Confusing re-exporting with running code
• Believing it prevents multiple imports

2. Which of the following is the correct syntax to re-export everything from a module named utils.ts?

easy

A. export all from './utils';

B. export * from './utils';

C. import * from './utils';

D. re-export * from './utils';

Solution

1. Step 1: Recall correct re-export syntax

   To re-export all exports from a module, use export * from 'module';.

2. Step 2: Match syntax with options

   export * from './utils'; matches the correct syntax exactly.

3. Final Answer:

   export * from './utils'; -> Option B

4. Quick Check:

   Re-export all = export * from [OK]

Hint: Use 'export * from' to re-export all [OK]

Common Mistakes:

• Using 'import * from' instead of 'export * from'
• Writing 'export all from' which is invalid
• Using 're-export' keyword which doesn't exist

3. Given the following files, what will be the output of console.log in main.ts?

// mathUtils.ts
export const pi = 3.14;
export const e = 2.71;

// index.ts
export { pi } from './mathUtils';

// main.ts
import { pi, e } from './index';
console.log(pi, e);

medium

A. 3.14 2.71

B. 3.14 undefined

C. undefined 2.71

D. Error: 'e' is not exported from './index'

Solution

1. Step 1: Analyze exports in index.ts

   Only pi is re-exported from mathUtils.ts. e is not exported.

2. Step 2: Check import in main.ts

   Trying to import both pi and e from index.ts causes an error because e is missing.

3. Final Answer:

   Error: 'e' is not exported from './index' -> Option D

4. Quick Check:

   Missing export causes import error [OK]

Hint: Only re-exported items can be imported [OK]

Common Mistakes:

• Assuming all original exports are re-exported
• Expecting undefined instead of error
• Ignoring missing export errors

4. Identify the error in this re-exporting code snippet:

// helpers.ts
export function greet() { return 'Hello'; }

// index.ts
export { greet } from './helpers';
export { greet } from './helpers';

medium

A. Duplicate export of 'greet' causes a syntax error

B. Missing semicolon after export statements

C. Cannot re-export functions, only variables

D. No error, code works fine

Solution

1. Step 1: Check for duplicate exports

   The code exports greet twice from the same module, causing a duplicate export.

2. Step 2: Understand TypeScript rules

   Duplicate exports of the same name cause syntax errors because they conflict.

3. Final Answer:

   Duplicate export of 'greet' causes a syntax error -> Option A

4. Quick Check:

   Duplicate exports = syntax error [OK]

Hint: Avoid exporting same name twice in one module [OK]

Common Mistakes:

• Ignoring duplicate export errors
• Thinking missing semicolons cause error
• Believing functions can't be re-exported

5. You have two modules: colors.ts exporting red and blue, and shapes.ts exporting circle and square. How can you create a single index.ts that re-exports only red and circle with new names primaryRed and roundShape?

hard

A. import { red, circle } from './colors'; export { red as primaryRed, circle as roundShape };

B. export * from './colors'; export * from './shapes';

C. export { red as primaryRed } from './colors'; export { circle as roundShape } from './shapes';

D. export { primaryRed, roundShape } from './colors', './shapes';

Solution

1. Step 1: Understand renaming during re-export

   You can rename exports using export { originalName as newName } syntax.

2. Step 2: Apply to given modules

   Re-export red as primaryRed from colors.ts and circle as roundShape from shapes.ts.

3. Final Answer:

   export { red as primaryRed } from './colors'; export { circle as roundShape } from './shapes'; -> Option C

4. Quick Check:

   Rename exports with 'as' keyword [OK]

Hint: Use 'export { oldName as newName }' to rename exports [OK]

Common Mistakes:

• Using import instead of export for re-exporting
• Trying to export multiple modules in one statement incorrectly
• Not renaming exports properly