Ever found yourself wishing you could tweak your TypeScript classes, methods, or properties without having to dive deep into their implementations? That’s where decorators come in. They let you modify or extend behavior in a really slick way. Kinda like putting a cherry on top of your code—making it better without all the extra calories.

Decorators in TypeScript are special functions, prefixed with an @ symbol, and applied during the compilation process. They might sound complex, but let’s break them down to see how they work and why they’re so useful.

What’s the Deal With Decorators?

Think of decorators as wrappers. These are functions that return another function, allowing them to modify the behavior of the elements they’re applied to. It’s a concept that’s borrowed from languages like Java, Python, and C#, so it’s not all that new.

Different Tunes for Different Times: Types of Decorators

Okay, so there are several types of decorators, each suited for different tasks. Let’s unpack each one with some handy examples.

Class Decorators

Applied directly to classes, these decorators can tweak class behavior. It’s a great way to add some meta-programming magic. Check out this example:

function classDecorator(target: Function) {
    console.log(`Class Decorator: ${target.name}`);
}

@classDecorator
class ExampleClass {
    constructor() {}
}

new ExampleClass();

This decorator logs the class name when the class is initialized. So you get a little shout-out every time an instance is created.

Method Decorators

Want to tweak methods without altering their initial code? Method decorators have got you covered. They sit right above the method definitions and get called when the method is invoked:

function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(`Method Decorator: ${propertyKey} in class ${target.constructor.name}`);
}

class ExampleClass {
    @methodDecorator
    exampleMethod() {}
}

const instance = new ExampleClass();
instance.exampleMethod();

Call the method, and you get a log of which method was called. Handy for debugging, right?

Property Decorators

If you want to log or modify class properties, property decorators do the trick. Check this out:

function propertyDecorator(target: any, propertyKey: string) {
    console.log(`Property Decorator: ${propertyKey} in class ${target.constructor.name}`);
}

class ExampleClass {
    @propertyDecorator
    classProperty: string;

    constructor() {}
}

new ExampleClass();

Every time the class initializes, the property decorator logs some info about the property.

Accessor Decorators

Accessor decorators are your go-tos for getters and setters. They can mess with the property descriptor to alter its behavior:

function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

class Point {
    private _x: number;
    private _y: number;

    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() {
        return this._x;
    }

    @configurable(false)
    get y() {
        return this._y;
    }
}

This example sets getters to non-configurable. No more changes allowed!

Parameter Decorators

Ever wanted to keep tabs on method parameters? Parameter decorators can help:

function print(target: Object, propertyKey: string, parameterIndex: number) {
    console.log(`Decorating param ${parameterIndex} from ${propertyKey}`);
}

class TestClass {
    testMethod(param0: any, @print param1: any) {}
}

const instance = new TestClass();
instance.testMethod(null, null);

When testMethod is called, it logs parameter info, giving you the scoop on method usage.

Getting Decorators Up and Running

TypeScript needs a head’s up to enable decorators. Just tweak your compiler options:

tsc --target ES5 --experimentalDecorators

Or add to your tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

Decorator Basics: The Syntax

Here’s the scoop: decorators follow the form @expression, and that expression must be a function that gets called with information on the decorated element. Here’s a glimpse at different decorator signatures:

• Class Decorators: function classDecorator(target: Function) { ... }
• Method Decorators: function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) { ... }
• Property Decorators: function propertyDecorator(target: any, propertyKey: string) { ... }
• Accessor Decorators: function accessorDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) { ... }
• Parameter Decorators: function parameterDecorator(target: Object, propertyKey: string, parameterIndex: number) { ... }

Real-World Applications: Making It Count

Decorators are not just for showing off—they’ve got real-world mojo too.

Putting on the Logger Hat

You can use decorators to log details about class initialization, method calls, or property access. Super useful, especially for debugging:

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Calling ${propertyKey} with args: ${args}`);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

class LoggerExample {
    @log
    exampleMethod(message: string) {
        console.log(message);
    }
}

const loggerInstance = new LoggerExample();
loggerInstance.exampleMethod("Hello, World!");

Memoization Marvel

With decorators, you can implement memoization to cache results of expensive calls:

function memoize(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const cache: { [key: string]: any } = {};
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        const key = JSON.stringify(args);
        if (cache[key] === undefined) {
            cache[key] = originalMethod.apply(this, args);
        }
        return cache[key];
    };
    return descriptor;
}

class MemoizeExample {
    @memoize
    exampleMethod(x: number, y: number) {
        // Simulate an expensive operation
        return x + y;
    }
}

const memoizeInstance = new MemoizeExample();
console.log(memoizeInstance.exampleMethod(2, 3)); // Calculates and caches
console.log(memoizeInstance.exampleMethod(2, 3)); // Returns from cache

Advanced Stuff: Decorator Factories

If you want more control, try decorator factories. They let you customize decorators based on parameters:

function color(value: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(`Decorating ${propertyKey} with color: ${value}`);
    };
}

class ColorExample {
    @color("red")
    exampleMethod() {}
}

const colorInstance = new ColorExample();
colorInstance.exampleMethod();

Here, the color factory logs the applied color, adding a layer of customization.

Wrapping It Up

Decorators in TypeScript are like a Swiss Army knife for developers. They extend and modify class behaviors without dipping into the original source code. With a solid grasp of decorators, you can write code that’s cleaner, more maintainable, and definitely more powerful. Whether you’re implementing logging, memoization, or a cool custom feature, decorators make your TypeScript projects dazzle.

So go ahead—experiment, customize, and make your TypeScript code pop with decorators!