This content originally appeared on DEV Community and was authored by Gerald Hamilton Wicks
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! 🚀
This content originally appeared on DEV Community and was authored by Gerald Hamilton Wicks
Gerald Hamilton Wicks | Sciencx (2024-09-12T22:54:20+00:00) Essential Guide to Refactoring Code for a Cleaner and Polished Design. Retrieved from https://www.scien.cx/2024/09/12/essential-guide-to-refactoring-code-for-a-cleaner-and-polished-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.