Overview

Decorators in TypeScript are a special kind of declaration that can be attached to a class, method, accessor, property, or parameter. They enable a way to modify or enhance the behavior of the entity they are applied to. By providing a way to add metadata or modify the behavior of classes and methods, decorators solve the problem of cross-cutting concerns in software development, such as logging, validation, or access control.

In real-world applications, decorators are commonly used in frameworks like Angular for dependency injection, in testing libraries for mocking purposes, and in various logging mechanisms. Their ability to encapsulate functionality outside the core logic makes them a powerful tool in a developer's toolkit.

Prerequisites

• TypeScript Basics: Understanding of TypeScript syntax, particularly classes and interfaces.
• JavaScript Knowledge: Familiarity with JavaScript functions and prototypes, as decorators leverage these concepts.
• ES6 Features: Knowledge of ES6 features, especially the class syntax, is essential.
• TypeScript Compiler: Basic understanding of setting up and using the TypeScript compiler.

Understanding Decorators

Decorators are defined using the @decoratorName syntax followed by the entity they are decorating. They provide a way to add additional functionality to classes and their members by wrapping them in another function. This is particularly useful for applying the same logic across multiple classes or methods without repeating code.

When a decorator is applied, it receives specific parameters depending on what it decorates. For example, a class decorator receives the constructor of the class, while a method decorator receives the target object, the method name, and the property descriptor. This flexibility allows developers to customize behavior based on the context in which the decorator is applied.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Calling ${propertyName} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        console.log(`Result: ${result}`);
        return result;
    };
}

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

const calculator = new Calculator();
calculator.add(5, 10);

The code above defines a Log decorator that wraps a method to log its input arguments and the result. The Calculator class has an add method decorated with @Log. When called, it logs the arguments and the result of the addition operation.

Expected output when invoking calculator.add(5, 10) will be:

• Calling add with arguments: [5,10]
• Result: 15

Decorator Parameters

Each type of decorator receives a different set of parameters. Understanding these parameters is crucial for effectively leveraging decorators. For a method decorator like the one used above, the parameters are:

• target: The prototype of the class for static members or the class constructor for instance members.
• propertyName: The name of the method being decorated.
• descriptor: The property descriptor for the method.

Types of Decorators

TypeScript supports several types of decorators: class decorators, method decorators, accessor decorators, property decorators, and parameter decorators. Each serves a unique purpose and is applied in different contexts.

Class decorators are applied to a class definition and can be used to modify the class constructor or add metadata. Method decorators are used to modify method behavior. Accessor decorators work on getters and setters, while property decorators apply to class properties, and parameter decorators can modify the behavior of constructor parameters.

Class Decorators

A class decorator is a function that takes a constructor as an argument and can return a new constructor or modify the original one. This allows developers to add functionality or metadata to the class itself.

function Sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@Sealed
class Person {
    constructor(public name: string) {}
}

const person = new Person('John');

In this example, the Sealed decorator seals the constructor and its prototype, preventing new properties from being added. This can be useful for ensuring the integrity of class definitions.

Method Decorators

Method decorators allow for behavior modification of class methods. They can be used for logging, validation, and even access control. The Log decorator from earlier serves as a classic example.

Edge Cases & Gotchas

When working with decorators, it’s crucial to be aware of certain edge cases and potential pitfalls. One common issue is the loss of context when using decorators, particularly if the decorated method relies on the instance context.

function Bound(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        return originalMethod.apply(this, args);
    };
}

class Example {
    value = 42;

    @Bound
    getValue() {
        return this.value;
    }
}

const example = new Example();
const getValue = example.getValue;
console.log(getValue()); // undefined

The above code illustrates a common problem where the context is lost when getValue is called directly. To resolve this, it's essential to ensure that the method retains the correct context, which can be handled using Function.prototype.bind or using arrow functions.

Performance & Best Practices

When using decorators, it’s important to consider performance implications, especially in performance-sensitive applications. Decorators can introduce overhead, particularly if they are doing heavy computations or asynchronous operations.

Best practices include:

• Minimize the amount of logic in decorators to avoid performance hits.
• Use decorators for cross-cutting concerns rather than business logic.
• Ensure that decorators are reusable and composable, allowing for greater flexibility.

function Memoize(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    const cache = new Map();
    descriptor.value = function (...args: any[]) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = originalMethod.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

class MathUtil {
    @Memoize
    fibonacci(n: number): number {
        if (n <= 1) return n;
        return this.fibonacci(n - 1) + this.fibonacci(n - 2);
    }
}

const mathUtil = new MathUtil();
console.log(mathUtil.fibonacci(10)); // 55

The Memoize decorator caches the results of the Fibonacci computation, significantly improving performance for repeated calls with the same arguments.

Real-World Scenario: Building a Logging System

In this section, we will build a simple logging system using decorators to demonstrate their practical use. The logging system will log method calls and track execution time.

function Logger(logLevel: string) {
    return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            const start = Date.now();
            const result = originalMethod.apply(this, args);
            const end = Date.now();
            console.log(`[${logLevel}] ${propertyName} executed in ${end - start} ms`);
            return result;
        };
    };
}

class UserService {
    @Logger('INFO')
    getUser(id: number) {
        // Simulate a delay
        for (let i = 0; i < 1e7; i++); // busy wait
        return { id, name: 'User ' + id };
    }
}

const userService = new UserService();
userService.getUser(1);

This Logger decorator logs the execution time of the method it decorates. When getUser is called, it will display the log message with the time taken.

Conclusion

• TypeScript decorators allow for elegant enhancements and modifications to classes and methods.
• Understanding the parameters and types of decorators is crucial for effective usage.
• Performance considerations are important when implementing decorators.
• Real-world applications include logging, access control, and validation.
• Practice creating and using decorators to solidify understanding.