Re-exporting modules in Typescript

Introduction

Re-exporting modules lets you gather exports from different files and share them from one place. This makes your code easier to organize and use.

You want to create a single file that collects and shares many exports from different files.

You want to simplify imports in other parts of your app by importing from one file instead of many.

You want to hide the internal structure of your modules and only expose what matters.

You want to rename or filter exports before sharing them.

You want to keep your code clean and easier to maintain.

Syntax

Typescript

export * from './module';

export { name1, name2 } from './module';

export { originalName as newName } from './module';

export * from './module'; shares everything exported by module.

You can pick specific exports or rename them when re-exporting.

Examples

This shares all exports from mathUtils module.

Typescript

export * from './mathUtils';

This shares only add and subtract functions from mathUtils.

Typescript

export { add, subtract } from './mathUtils';

This shares add function but renames it to sum when exporting.

Typescript

export { add as sum } from './mathUtils';

Sample Program

We have two modules: mathUtils and stringUtils. The index.ts file re-exports all math functions and the shout function from stringUtils. In main.ts, we import everything from index.ts and use the functions.

Typescript

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

export function subtract(a: number, b: number) {
  return a - b;
}

// file: stringUtils.ts
export function shout(text: string) {
  return text.toUpperCase() + '!';
}

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

// file: main.ts
import { add, subtract, shout } from './index';

console.log(add(5, 3));
console.log(subtract(10, 4));
console.log(shout('hello'));

Important Notes

Re-exporting does not create new copies of the exports; it just forwards them.

Be careful to avoid circular dependencies when re-exporting modules.

You can combine re-exporting with local exports in the same file.

Summary

Re-exporting helps organize and simplify your imports by sharing exports from one place.

You can export everything, some parts, or rename exports when re-exporting.

This keeps your code cleaner and easier to maintain.

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