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.