Class Decorators

Introduction

Decorators are a powerful feature in TypeScript that allow you to modify or enhance the behavior of classes, methods, properties, and parameters. They provide a way to add metadata or functionality to your code without modifying the original structure. In this tutorial, we will focus on how to use decorators with classes.

Concept

A class decorator is a function that can be applied to a class constructor. It receives one argument: the target of the decorator, which is the constructor function of the class being decorated. Class decorators can be used for various purposes such as logging, modifying the prototype, or adding new properties and methods to the class.

To use decorators in TypeScript, you need to enable the experimentalDecorators compiler option in your tsconfig.json file:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

## Examples

### Basic Class Decorator

Let's start with a simple example of a class decorator that logs information about the class being decorated.

<CodeBlock language="typescript">
{`function logClass(target: Function) {
  console.log(\`Class \${target.name} has been created.\`);
}

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

const instance = new MyClass();`}
</CodeBlock>

In this example, the `logClass` function is a class decorator that logs a message when the class is defined. The `@logClass` syntax applies the decorator to the `MyClass` class.

When you run this code, you will see the following output:

<OutputBlock>
{`Class MyClass has been created.
MyClass instance created.`}
</OutputBlock>

### Modifying the Class Prototype

Decorators can also be used to modify the prototype of a class. For example, let's add a new method to the `MyClass` prototype using a decorator.

<CodeBlock language="typescript">
{`function addMethod(target: Function) {
  target.prototype.greet = function() {
    console.log('Hello from MyClass!');
  };
}

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

const instance = new MyClass();
instance.greet(); // Output: Hello from MyClass!`}
</CodeBlock>

In this example, the `addMethod` decorator adds a `greet` method to the `MyClass` prototype. The `greet` method can then be called on instances of `MyClass`.

### Accessing and Modifying Class Properties

Decorators can also be used to access and modify class properties. Let's create a decorator that logs the value of a property when it is accessed.

<CodeBlock language="typescript">
{`function logProperty(target: any, key: string) {
  const getter = function () {
    console.log(\`Getting \${key} with value \${this[key]}\`);
    return this[key];
  };

  const setter = function (newVal: any) {
    console.log(\`Setting \${key} to \${newVal}\`);
    this[key] = newVal;
  };

  Object.defineProperty(target, key, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class MyClass {
  @logProperty
  public name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const instance = new MyClass('Alice');
console.log(instance.name); // Output: Getting name with value Alice
instance.name = 'Bob';     // Output: Setting name to Bob`}
</CodeBlock>

In this example, the `logProperty` decorator is applied to the `name` property of the `MyClass` class. It logs a message whenever the property is accessed or modified.

### Combining Multiple Decorators

Decorators can be combined to apply multiple functionalities to a class. The order in which decorators are applied matters and follows the reverse execution order: from bottom to top.

<CodeBlock language="typescript">
{`function firstDecorator(target: Function) {
  console.log('First decorator executed.');
}

function secondDecorator(target: Function) {
  console.log('Second decorator executed.');
}

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

const instance = new MyClass();`}
</CodeBlock>

When you run this code, you will see the following output:

<OutputBlock>
{`Second decorator executed.
First decorator executed.
MyClass instance created.`}
</OutputBlock>

As shown, the `secondDecorator` is executed first, followed by the `firstDecorator`.

## What's Next?

In the next section, we will explore how to use decorators with methods. Method decorators allow you to modify or enhance the behavior of class methods in a similar way to class decorators.

Stay tuned for more advanced topics on TypeScript decorators!