Essential Guide to Refactoring Code for a Cleaner and Polished Design

In the fast-paced world of software development, writing clean and maintainable code is essential. Inspired by Uncle Bob's "Clean Code," we’ll delve into five crucial refactoring principles to enhance your codebase. Each principle is accompanied by TypeScript code examples demonstrating how to implement these improvements. Let's refine our code together!

1️⃣ Say No to Big Functions

Explanation: Uncle Bob advises keeping functions concise, ideally under 20 lines. Large functions can be challenging to understand, test, and maintain. By breaking functions into smaller, more manageable pieces, you improve readability and reduce complexity.

Before Refactoring:

import fs from 'fs';

function processData(data: string[]): void {
    // Step 1: Validate data
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }

    // Step 2: Clean data
    const cleanedData = data.map(item => item.trim()).filter(item => item !== '');

    // Step 3: Process data
    const result: string[] = [];
    for (const item of cleanedData) {
        if (item.length > 5) {
            result.push(item.toUpperCase());
        } else {
            result.push(item.toLowerCase());
        }
    }

    // Step 4: Save results
    fs.writeFileSync('results.txt', result.join('\n'));
}

After Refactoring:

import fs from 'fs';

function validateData(data: any): void {
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }
}

function cleanData(data: string[]): string[] {
    return data.map(item => item.trim()).filter(item => item !== '');
}

function processItem(item: string): string {
    return item.length > 5 ? item.toUpperCase() : item.toLowerCase();
}

function saveResults(results: string[], filename: string = 'results.txt'): void {
    fs.writeFileSync(filename, results.join('\n'));
}

function processData(data: string[]): void {
    validateData(data);
    const cleanedData = cleanData(data);
    const results = cleanedData.map(processItem);
    saveResults(results);
}

2️⃣ Embrace Single Responsibility

Explanation: Each class or method should have a single responsibility. This means that each class or method should do one thing and do it well. Adhering to this principle makes your code more modular, easier to test, and more flexible to change.

Before Refactoring:

class User {
    constructor(public username: string, public email: string) {}

    sendEmail(message: string): void {
        // Code to send an email
        console.log(`Sending email to ${this.email}: ${message}`);
    }

    saveToDatabase(): void {
        // Code to save user to the database
        console.log(`Saving ${this.username} to the database`);
    }
}

After Refactoring:

class User {
    constructor(public username: string, public email: string) {}
}

class EmailService {
    sendEmail(email: string, message: string): void {
        // Code to send an email
        console.log(`Sending email to ${email}: ${message}`);
    }
}

class UserRepository {
    save(user: User): void {
        // Code to save user to the database
        console.log(`Saving ${user.username} to the database`);
    }
}

3️⃣ Simplify Parameter Passing

Explanation: Limiting the number of parameters a function accepts makes it easier to understand and use. Complex functions with many parameters can be confusing and prone to errors. By using objects or data structures, you can group related parameters together.

Before Refactoring:

function createUser(username: string, email: string, password: string, age: number, address: string): void {
    // Code to create a user
    console.log(`Creating user: ${username}, ${email}, ${password}, ${age}, ${address}`);
}

After Refactoring:

interface User {
    username: string;
    email: string;
    password: string;
    age: number;
    address: string;
}

function createUser(user: User): void {
    // Code to create a user
    console.log(`Creating user: ${user.username}, ${user.email}, ${user.password}, ${user.age}, ${user.address}`);
}

4️⃣ Avoid Magic Numbers

Explanation: Magic numbers are literal numbers used directly in code without explanation. They can make code harder to understand and maintain. Replacing magic numbers with named constants improves readability and makes future changes easier.

Before Refactoring:

function calculateDiscountedPrice(price: number): number {
    // Apply a discount of 15%
    return price * 0.85;
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * 5;
}

After Refactoring:

const DISCOUNT_RATE = 0.15;
const SHIPPING_COST_PER_KG = 5;

function calculateDiscountedPrice(price: number): number {
    // Apply a discount
    return price * (1 - DISCOUNT_RATE);
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * SHIPPING_COST_PER_KG;
}

5️⃣ Name Variables with Meaning

Explanation: Using meaningful variable names makes your code self-documenting and easier to understand. Avoid single-letter or cryptic names; instead, choose names that clearly convey the variable's purpose and usage.

Before Refactoring:

function calculate(u: number, v: number): number {
    const r = u + v;
    const p = r * 2;
    return p;
}

After Refactoring:

function calculateTotalCost(baseCost: number, additionalFees: number): number {
    const totalCost = baseCost + additionalFees;
    return totalCost;
}

Conclusion

Applying these refactoring principles to your TypeScript code will significantly enhance its clarity, maintainability, and overall quality. Clean code practices are vital for effective development and collaboration.

What refactoring strategies have worked best for you? Share your experiences or any challenges you've faced below! ?

The above is the detailed content of Essential Guide to Refactoring Code for a Cleaner and Polished Design. For more information, please follow other related articles on the PHP Chinese website!