Leveraging TypeScript for Code Decoupling and Modularization | CodeSignal Learn

Leveraging TypeScript for Code Decoupling and Modularization | CodeSignal Learn

Introduction

Welcome! Today, we focus on writing maintainable and scalable software through Code Decoupling and Modularization . We will explore techniques to minimize dependencies, making our code more modular, manageable, and easier to maintain using TypeScript .

What are Code Decoupling and Modularization?

Decoupling ensures our code components are independent by reducing the connections among them. Consider the following TypeScript example: TypeScript // Coupled code function calculateArea(length: number, width: number, shape: string): number {if (shape === "rectangle") {return length * width; // calculate area for rectangle} else if (shape === "triangle") {return (length * width) / 2; // calculate area for triangle} return 0;} // Decoupled code function calculateRectangleArea(length: number, width: number): number {return length * width; // function to calculate rectangle area} function calculateTriangleArea(length: number, width: number): number {return (length * width) / 2; // function to calculate triangle area} In the coupled code, calculateArea performs multiple operations, calculating areas for different shapes. In the decoupled code, we split these operations into independent functions, leading to cleaner code. Conversely, modularization breaks down a program into manageable units or modules.

Understanding Code Dependencies and Why They Matter

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Brick by Brick: Building a Codebase with Modules

Creating modules helps structure our code in a neat and efficient manner. In TypeScript, each file can act as a module: // The content of shapes.ts export function calculateRectangleArea(length: number, width: number): number {return length * width;} export function calculateTriangleArea(base: number, height: number): number {return 0.5 * base * height;} Using the content of shapes.ts in another file: // Importing the functions from shapes.ts import { calculateRectangleArea, calculateTriangleArea } from './shapes'; const rectangleArea: number = calculateRectangleArea(5, 4); // calculates rectangle area const triangleArea: number = calculateTriangleArea(3, 4); // calculates triangle area console.log(`Rectangle Area: ${rectangleArea}`); // Output: Rectangle Area: 20 console.log(`Triangle Area: ${triangleArea}`); // Output: Triangle Area: 6 The functions for calculating the areas are defined in a separate file — a module in TypeScript. In another file, we import and use these functions.

The principle of Separation of Concerns (SoC) allows focusing on a single aspect of a program at one time.

TypeScript

// Code not following SoC
function getFullInfo(name: string, age: number, city: string, job: string): void {
    console.log(`${name} is ${age} years old.`);
    console.log(`${name} lives in ${city}.`);
    console.log(`${name} works as a ${job}.`);
}

// Code following SoC  
function printAge(name: string, age: number): void {
    console.log(`${name} is ${age} years old.`); // prints age
}

function printCity(name: string, city: string): void {
    console.log(`${name} lives in ${city}.`); // prints city
}

function printJob(name: string, job: string): void {
    console.log(`${name} works as a ${job}.`); // prints job
}

function getFullInfo(name: string, age: number, city: string, job: string): void {
    printAge(name, age); // sends name and age to `printAge`
    printCity(name, city); // sends name and city to `printCity`
    printJob(name, job); // sends name and job to `printJob`
}

By applying SoC, we broke down the getFullInfo function into separate functions for age, city, and job.

TypeScript

// The content of shapes.ts
export function calculateRectangleArea(length: number, width: number): number {
    return length * width;
}

export function calculateTriangleArea(base: number, height: number): number {
    return 0.5 * base * height;
}

TypeScript

// Importing the functions from shapes.ts
import { calculateRectangleArea, calculateTriangleArea } from './shapes';

const rectangleArea: number = calculateRectangleArea(5, 4); // calculates rectangle area
const triangleArea: number = calculateTriangleArea(3, 4); // calculates triangle area

console.log(`Rectangle Area: ${rectangleArea}`); // Output: Rectangle Area: 20
console.log(`Triangle Area: ${triangleArea}`); // Output: Triangle Area: 6