What are decorators in TypeScript and how do they work?

What are decorators in TypeScript and how do they work?

Decorators are special types of declarations that can be attached to a class, method, accessor, property, or parameter. They allow you to modify the behavior of the entity they are attached to.

Can you give me an example of a class decorator?

Sure! Here's a simple class decorator example:

function LogClass(target: Function) {
    console.log(`Class ${target.name} is created.`);
}

@LogClass
class MyClass {
    constructor() {
        console.log('MyClass instance created.');
    }
}

This decorator logs a message when the class is created.

What about method decorators? How do they differ?

Method decorators are similar but are applied to methods. They can modify the method's behavior or add additional functionality. Here's an example:

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

class MyClass {
    @LogMethod
    myMethod(arg: string) {
        console.log(`Argument: ${arg}`);
    }
}

This logs the arguments every time myMethod is called.

Are there any limitations or rules I should be aware of when using decorators?

Yes, decorators can only be used in TypeScript with the experimentalDecorators compiler option enabled. Also, they must be declared before the entity they are decorating, and they cannot be used in certain contexts like interfaces.