Module augmentation syntax in Typescript - Mini Project: Build & Apply

Module augmentation syntax

📖 Scenario: You are working on a TypeScript project that uses a third-party module called shapes. You want to add a new function to this module without changing its original code.

🎯 Goal: Learn how to use module augmentation syntax in TypeScript to add a new function getCircleArea to the existing shapes module.

📋 What You'll Learn

Create a module named shapes with an existing function getSquareArea.

Add a module augmentation to shapes that declares a new function getCircleArea.

Implement the new function getCircleArea inside the module augmentation.

Call both getSquareArea and getCircleArea and print their results.

💡 Why This Matters

🌍 Real World

Module augmentation is useful when you want to add features to existing libraries or modules without modifying their original source code.

💼 Career

Many TypeScript projects use third-party libraries. Knowing how to safely extend these libraries with module augmentation is a valuable skill for professional developers.

1

Create the initial shapes module

Create a module named shapes that exports a function called getSquareArea. This function takes a number side and returns the area of a square (side * side).

Typescript

// Your code here

Need a hint?

Use export module shapes and inside it define export function getSquareArea(side: number): number.

2

Add module augmentation declaration

Add a module augmentation for the shapes module that declares a new function called getCircleArea which takes a number radius and returns a number.

Typescript

export module shapes {
    export function getSquareArea(side: number): number {
        return side * side;
    }
}

// Your code here

Need a hint?

Use declare module "shapes" and inside it declare export function getCircleArea(radius: number): number;.

3

Implement the new function inside module augmentation

Implement the getCircleArea function inside the shapes module augmentation. It should return the area of a circle using the formula Math.PI * radius * radius.

Typescript

export module shapes {
    export function getSquareArea(side: number): number {
        return side * side;
    }
}

declare module "shapes" {
    export function getCircleArea(radius: number): number;
}

// Implement getCircleArea function here

Need a hint?

Inside export module shapes, add export function getCircleArea(radius: number): number with the correct return statement.

4

Call and print results of both functions

Call shapes.getSquareArea(4) and shapes.getCircleArea(3). Print their results using console.log.

Typescript

export module shapes {
    export function getSquareArea(side: number): number {
        return side * side;
    }

    export function getCircleArea(radius: number): number {
        return Math.PI * radius * radius;
    }
}

declare module "shapes" {
    export function getCircleArea(radius: number): number;
}

// Call and print results here

Need a hint?

Use console.log(shapes.getSquareArea(4)) and console.log(shapes.getCircleArea(3)) to print the results.