Refactoring Code Smells Using TypeScript

Welcome to the world of refactoring! We're learning about Code Smells, which are patterns in code that hint at potential problems. Our mission is to help you spot these smells and understand how to improve them or, in programming terms, how to refactor them. We'll delve into the concept of code smells, examine different types, and apply real-world code examples to solidify your understanding. Let's get started!

Code smells are signs that something could be amiss in our code. You could compare them to an unpleasant smell in a room. But instead of indicating rotten food or a dirty sock, they signal that our code may not be as readable, efficient, or manageable as it could be.

Consider this bit of code, now written using TypeScript:

function calculate(quantity: number, price: number): number {
    return quantity * price;
}

let total: number = calculate(5, 3);

The function name calculate is too vague. What exactly does it calculate? For whom? This ambiguity is a sign of a bad naming code smell. Using TypeScript, we can clearly define the expected types for better clarity, but we still need to consider a more descriptive function name.

If you notice the same piece of code in more than one place, you may be looking at an example of the Duplicate Code smell. Duplicate code leaves room for errors and bugs. If you need to make a change, you might overlook one instance of duplication.

Here's an example in TypeScript:

let totalApplesPrice: number = quantityApples * priceApple - 5;
let totalBananasPrice: number = quantityBananas * priceBanana - 5;

This code performs the same operation on different data. Instead of duplicating the operation, we can create a function to handle it:

function calculatePrice(quantity: number, price: number): number {
    let discount: number = 5;
    return quantity * price - discount;
}

let totalApplesPrice: number = calculatePrice(quantityApples, priceApple);
let totalBananasPrice: number = calculatePrice(quantityBananas, priceBanana);

With this solution, if we need to change the discount or the formula, we can do so in one place: the calculatePrice function. The use of TypeScript ensures that type checks are enforced, reducing potential errors.