Typescript Decorators Guide

## Introduction to TypeScript Decorators
TypeScript decorators are a powerful feature that allows developers to modify or extend the behavior of classes, methods, and properties. They are essentially functions that can be applied to a class, method, or property to add additional functionality without altering the original code. In this tutorial, we will explore the world of TypeScript decorators, learn how to create and use them, and discover their benefits and use cases.

## What are Decorators?
Decorators are a design pattern that allows developers to add new behavior to an object without modifying its structure. In TypeScript, decorators are denoted by the `@` symbol followed by the decorator name. They can be applied to classes, methods, properties, and even accessors. For example:

function MyClassDecorator(target: any) {
  console.log("MyClassDecorator called");
}

@MyClassDecorator
class MyClass {}

In this example, the `MyClassDecorator` function is applied to the `MyClass` class using the `@` symbol.

## Creating a Decorator
To create a decorator, you need to define a function that takes the target object as an argument. The target object can be a class, method, or property. For example:

function LoggerDecorator(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 MyClass {
  @LoggerDecorator
  myMethod(arg1: string, arg2: number) {
    console.log(`myMethod called with args: ${arg1}, ${arg2}`);
  }
}

In this example, the `LoggerDecorator` function is applied to the `myMethod` method of the `MyClass` class. The decorator logs a message before calling the original method.

## Types of Decorators
There are several types of decorators in TypeScript, including:
* Class decorators: applied to classes
* Method decorators: applied to methods
* Property decorators: applied to properties
* Accessor decorators: applied to accessors (getters and setters)
For example:

function MyClassDecorator(target: any) {
  console.log("MyClassDecorator called");
}

function MyMethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log("MyMethodDecorator called");
}

function MyPropertyDecorator(target: any, propertyKey: string) {
  console.log("MyPropertyDecorator called");
}

@MyClassDecorator
class MyClass {
  @MyMethodDecorator
  myMethod() {}

  @MyPropertyDecorator
  myProperty: string;
}

In this example, we define three decorators: `MyClassDecorator`, `MyMethodDecorator`, and `MyPropertyDecorator`. We then apply these decorators to a class, method, and property respectively.

## Decorator Metadata
Decorators can also be used to add metadata to classes, methods, and properties. This metadata can be accessed using the `Reflect` API. For example:

function MyClassDecorator(target: any) {
  Reflect.defineMetadata("myMetadata", "Hello World", target);
}

@MyClassDecorator
class MyClass {}

console.log(Reflect.getMetadata("myMetadata", MyClass));

In this example, we define a decorator that adds metadata to a class using the `Reflect.defineMetadata` function. We can then access this metadata using the `Reflect.getMetadata` function.

## Real-World Use Cases
Decorators have many real-world use cases, including:
* Logging: decorators can be used to log information about method calls, such as the arguments passed and the return values.
* Authentication: decorators can be used to authenticate users before allowing them to access certain methods or properties.
* Caching: decorators can be used to cache the results of expensive method calls.
For example:

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

class MyClass {
  @CacheDecorator
  myMethod(arg1: string, arg2: number) {
    // expensive operation
  }
}

In this example, we define a decorator that caches the results of a method call. The decorator checks if the result is already cached before calling the original method.

## Conclusion
TypeScript decorators are a powerful feature that allows developers to modify or extend the behavior of classes, methods, and properties. They are essentially functions that can be applied to a class, method, or property to add additional functionality without altering the original code. In this tutorial, we explored the world of TypeScript decorators, learned how to create and use them, and discovered their benefits and use cases. We also looked at real-world use cases, such as logging, authentication, and caching. With decorators, you can write more modular, reusable, and maintainable code.