TypeScript Decorators vs Methods: Understanding Key Distinctions

Decorators and methods in TypeScript serve different purposes but often cause confusion among developers. Let’s explore their key distinctions and learn when to use each effectively.

Table of Contents

• Understanding TypeScript Decorators
  • Basic Decorator Structure
  • When to Use Decorators
• Understanding TypeScript Methods
  • Basic Method Structure
  • When to Use Methods
• Key Differences
  • 1. Execution Time
  • 2. Purpose
  • 3. Reusability
• Practical Example: Combining Decorators and Methods
• Best Practices
• Common Pitfalls to Avoid
• Conclusion

Understanding TypeScript Decorators

Decorators are special declarations that can modify classes, methods, properties, or parameters. They provide a way to add both annotations and metadata to your code.

Basic Decorator Structure

function log(target: any, propertyKey: string) {
    console.log(`${propertyKey} was accessed`);
}

class Example {
    @log
    public name: string = "TypeScript";
}
Code language: JavaScript (javascript)

When to Use Decorators

Decorators are ideal when you need to:

• Add metadata to classes or members
• Modify behavior without changing the original code
• Implement cross-cutting concerns like logging or validation
• Create reusable code modifications

Understanding TypeScript Methods

Methods are functions that belong to classes and define the behavior of class instances.

Basic Method Structure

class Calculator {
    add(a: number, b: number): number {
        return a + b;
    }

    multiply(a: number, b: number): number {
        return a * b;
    }
}
Code language: JavaScript (javascript)

When to Use Methods

Methods are appropriate when you need to:

• Define specific behaviors for class instances
• Implement business logic
• Handle data manipulation within a class
• Create reusable functionality tied to class instances

Key Differences

1. Execution Time

Decorators:

• Execute during class definition
• Run at compile time
• Modify class structure before instantiation

Methods:

• Execute during runtime
• Run when explicitly called
• Perform operations on instance data

2. Purpose

Decorators:

• Modify or enhance existing code
• Add metadata
• Implement cross-cutting concerns

Methods:

• Define class behavior
• Implement business logic
• Handle instance-specific operations

3. Reusability

Decorators:

// Reusable decorator
function validate(target: any, propertyKey: string) {
    let value = target[propertyKey];

    const getter = () => value;
    const setter = (newValue: string) => {
        if (newValue.length < 3) {
            throw new Error('Value is too short');
        }
        value = newValue;
    };

    Object.defineProperty(target, propertyKey, {
        get: getter,
        set: setter
    });
}

// Can be used on multiple classes
class User {
    @validate
    name: string = '';
}

class Product {
    @validate
    title: string = '';
}
Code language: JavaScript (javascript)

Methods:

// Method needs to be implemented in each class
class User {
    validateName(name: string): boolean {
        return name.length >= 3;
    }
}

class Product {
    validateTitle(title: string): boolean {
        return title.length >= 3;
    }
}
Code language: JavaScript (javascript)

Practical Example: Combining Decorators and Methods

// Decorator for logging method execution time
function measureTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
        const start = performance.now();
        const result = originalMethod.apply(this, args);
        const end = performance.now();
        console.log(`${propertyKey} took ${end - start}ms to execute`);
        return result;
    };

    return descriptor;
}

class DataProcessor {
    @measureTime
    processData(data: number[]): number[] {
        // Complex data processing
        return data.map(item => item * 2);
    }

    validateData(data: number[]): boolean {
        return data.every(item => typeof item === 'number');
    }
}
Code language: JavaScript (javascript)

Best Practices

1. Use Decorators When:

• Implementing cross-cutting concerns
• Adding metadata or validation
• Modifying class structure
• Creating reusable code modifications

1. Use Methods When:

• Implementing core business logic
• Handling instance-specific operations
• Managing state within a class
• Creating instance-specific behavior

Common Pitfalls to Avoid

1. Overusing Decorators:

// Bad Practice
class User {
    @validate
    @transform
    @log
    @serialize
    name: string;
}

// Better Approach
class User {
    @validatedProperty({
        transform: true,
        log: true,
        serialize: true
    })
    name: string;
}
Code language: JavaScript (javascript)

1. Using Decorators for Business Logic:

// Bad Practice
@calculateTotalPrice
class ShoppingCart {
    items: Item[];
}

// Better Approach
class ShoppingCart {
    items: Item[];

    calculateTotal(): number {
        return this.items.reduce((sum, item) => sum + item.price, 0);
    }
}
Code language: JavaScript (javascript)

Conclusion

Understanding the distinction between TypeScript decorators and methods is crucial for writing clean, maintainable code. Decorators excel at cross-cutting concerns and code modifications, while methods are perfect for implementing core business logic and instance-specific behavior.

As you continue developing with TypeScript, remember to choose the right tool for the job. Consider the purpose, execution time, and reusability requirements when deciding between decorators and methods.