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.
Decoupling ensures our code components are independent by reducing the connections among them. Consider the following TypeScript example:
TypeScript1// Coupled code 2function calculateArea(length: number, width: number, shape: string): number { 3 if (shape === "rectangle") { 4 return length * width; // calculate area for rectangle 5 } else if (shape === "triangle") { 6 return (length * width) / 2; // calculate area for triangle 7 } 8 return 0; 9} 10 11// Decoupled code 12function calculateRectangleArea(length: number, width: number): number { 13 return length * width; // function to calculate rectangle area 14} 15 16function calculateTriangleArea(length: number, width: number): number { 17 return (length * width) / 2; // function to calculate triangle area 18}
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.
Code dependencies occur when one part of the code relies on another part to function. In tightly coupled code, these dependencies are complex, making management and maintenance difficult. By employing decoupling and modularization, we reduce dependencies, leading to cleaner, more organized code.
Consider the following scenario in an e-commerce application:
TypeScript1// Monolithic code with high dependencies 2class Order { 3 private items: string[]; 4 private prices: number[]; 5 private discountRate: number; 6 private taxRate: number; 7 8 constructor(items: string[], prices: number[], discountRate: number, taxRate: number) { 9 this.items = items; 10 this.prices = prices; 11 this.discountRate = discountRate; 12 this.taxRate = taxRate; 13 } 14 15 calculateTotal(): number { 16 let total = this.prices.reduce((sum, price) => sum + price, 0); 17 total -= total * this.discountRate; 18 total += total * this.taxRate; 19 return total; 20 } 21 22 printOrderSummary(): void { 23 const total = this.calculateTotal(); 24 console.log(`Order Summary: Items: ${this.items}, Total after tax and discount: $${total.toFixed(2)}`); 25 } 26}
The Order class performs multiple tasks: calculating the total cost by applying discounts and taxes, and printing an order summary. This complexity makes maintenance difficult.
Using modularization, we decouple responsibilities by creating separate DiscountCalculator and TaxCalculator classes:
TypeScript1// Decoupled and modularized code 2class DiscountCalculator { 3 static applyDiscount(price: number, discountRate: number): number { 4 return price - (price * discountRate); 5 } 6} 7 8class TaxCalculator { 9 static applyTax(price: number, taxRate: number): number { 10 return price + (price * taxRate); 11 } 12} 13 14class Order { 15 private items: string[]; 16 private prices: number[]; 17 private discountRate: number; 18 private taxRate: number; 19 20 constructor(items: string[], prices: number[], discountRate: number, taxRate: number) { 21 this.items = items; 22 this.prices = prices; 23 this.discountRate = discountRate; 24 this.taxRate = taxRate; 25 } 26 27 calculateTotal(): number { 28 let total = this.prices.reduce((sum, price) => sum + price, 0); 29 total = DiscountCalculator.applyDiscount(total, this.discountRate); 30 total = TaxCalculator.applyTax(total, this.taxRate); 31 return total; 32 } 33 34 printOrderSummary(): void { 35 const total = this.calculateTotal(); 36 console.log(`Order Summary: Items: ${this.items}, Total after tax and discount: $${total.toFixed(2)}`); 37 } 38}
Modularization here adheres to the Single Responsibility Principle (SRP) by splitting the responsibilities of discounting, taxation, and order management into separate classes. Additionally, using static in DiscountCalculator and TaxCalculator makes these utility methods stateless, meaning they don't depend on any instance and are reusable across the application.
The principle of Separation of Concerns (SoC) allows focusing on a single aspect of a program at one time.
TypeScript1// Code not following SoC 2function getFullInfo(name: string, age: number, city: string, job: string): void { 3 console.log(`${name} is ${age} years old.`); 4 console.log(`${name} lives in ${city}.`); 5 console.log(`${name} works as a ${job}.`); 6} 7 8// Code following SoC 9function printAge(name: string, age: number): void { 10 console.log(`${name} is ${age} years old.`); // prints age 11} 12 13function printCity(name: string, city: string): void { 14 console.log(`${name} lives in ${city}.`); // prints city 15} 16 17function printJob(name: string, job: string): void { 18 console.log(`${name} works as a ${job}.`); // prints job 19} 20 21function getFullInfo(name: string, age: number, city: string, job: string): void { 22 printAge(name, age); // sends name and age to `printAge` 23 printCity(name, city); // sends name and city to `printCity` 24 printJob(name, job); // sends name and job to `printJob` 25}
By applying SoC, we broke down the getFullInfo function into separate functions for age, city, and job.
Creating modules helps structure our code in a neat and efficient manner. In TypeScript, each file can act as a module:
TypeScript1// The content of shapes.ts 2export function calculateRectangleArea(length: number, width: number): number { 3 return length * width; 4} 5 6export function calculateTriangleArea(base: number, height: number): number { 7 return 0.5 * base * height; 8}
Using the content of shapes.ts in another file:
TypeScript1// Importing the functions from shapes.ts 2import { calculateRectangleArea, calculateTriangleArea } from './shapes'; 3 4const rectangleArea: number = calculateRectangleArea(5, 4); // calculates rectangle area 5const triangleArea: number = calculateTriangleArea(3, 4); // calculates triangle area 6 7console.log(`Rectangle Area: ${rectangleArea}`); // Output: Rectangle Area: 20 8console.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.
Excellent job today! You've learned about Code Decoupling and Modularization, grasped the value of the Separation of Concerns principle, and explored code dependencies and methods to minimize them using TypeScript. Prepare for some exciting practice exercises to reinforce these concepts. Until next time!