Re-exporting modules in Typescript - Mini Project: Build & Apply

Re-exporting Modules in TypeScript

📖 Scenario: You are building a small library with multiple utility functions split into different files. To make it easier for users to import these utilities, you want to create a single file that re-exports all the functions.

🎯 Goal: Create separate TypeScript modules with utility functions, then create a main module that re-exports these functions so users can import them from one place.

📋 What You'll Learn

Create two separate modules with named exports

Create a main module that re-exports all named exports from the two modules

Import the re-exported functions in a separate file and use them

Print the results of calling the imported functions

💡 Why This Matters

🌍 Real World

Re-exporting modules helps organize code and makes it easier for users to import multiple utilities from a single place.

💼 Career

Many professional TypeScript projects use re-exporting to create clean and maintainable APIs for libraries and applications.

1

Create two utility modules with named exports

Create a file named mathUtils.ts with a named export function add that takes two numbers and returns their sum. Also create a file named stringUtils.ts with a named export function capitalize that takes a string and returns it with the first letter capitalized.

Typescript

// Create the function add in mathUtils.ts
// Create the function capitalize in stringUtils.ts

Need a hint?

Use export function to create named exports in each file.

2

Create a main module to re-export all utilities

Create a file named index.ts. Use export * from './mathUtils' and export * from './stringUtils' to re-export all named exports from both modules.

Typescript

export function add(a: number, b: number): number {
    return a + b;
}

export function capitalize(text: string): string {
    return text.charAt(0).toUpperCase() + text.slice(1);
}

// Re-export all from mathUtils and stringUtils in index.ts
// Your code here

Need a hint?

Use export * from 'module' syntax to re-export all exports from a module.

3

Import re-exported functions in a new file

Create a file named app.ts. Import add and capitalize from './index'. Use these functions to add 5 and 7, and capitalize the string "hello".

Typescript

export function add(a: number, b: number): number {
    return a + b;
}

export function capitalize(text: string): string {
    return text.charAt(0).toUpperCase() + text.slice(1);
}

export * from './mathUtils';
export * from './stringUtils';

// Import add and capitalize from './index' and use them
// Your code here

Need a hint?

Use import { add, capitalize } from './index' to get the functions from the re-exporting module.

4

Print the results of the imported functions

Add console.log statements to print the values of sum and word.

Typescript

export function add(a: number, b: number): number {
    return a + b;
}

export function capitalize(text: string): string {
    return text.charAt(0).toUpperCase() + text.slice(1);
}

export * from './mathUtils';
export * from './stringUtils';

import { add, capitalize } from './index';

const sum = add(5, 7);
const word = capitalize('hello');

// Print sum and word
// Your code here

Need a hint?

Use console.log(sum) and console.log(word) to display the results.