Using TypeScript Decorators to Enhance Your Code

In the previous articles, we covered TypeScript types, interfaces, classes, generics, modules, and advanced types and techniques. In this article, we will explore TypeScript decorators, a powerful feature that allows you to add metadata or modify the behavior of classes, methods, and properties. We will discuss how to create and use class decorators, method decorators, accessor decorators, and property decorators.

Class Decorators

Class decorators are applied to class constructors and can be used to observe, modify, or replace the constructor. They are declared using the @ symbol, followed by a function that takes a single argument, the class constructor.

Here's an example of a class decorator:

function logConstructor(target: Function) {
  console.log(`Constructor: ${target.name}`);
}

@logConstructor
class MyClass {
  constructor() {
    console.log("Creating a MyClass instance");
  }
}

const instance = new MyClass(); // Output: Constructor: MyClass
                                //         Creating a MyClass instance

Method Decorators

Method decorators are applied to class methods and can be used to observe, modify, or replace the method. They are declared using the @ symbol, followed by a function that takes three arguments: the target object, the method name, and the method descriptor.

Here's an example of a method decorator:

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

class MyClass {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const instance = new MyClass();
console.log(instance.add(1, 2)); // Output: Calling add with arguments: [1,2]
                                 //         3

Accessor Decorators

Accessor decorators are applied to class accessors (getters and setters) and can be used to observe, modify, or replace the accessor. They are declared using the @ symbol, followed by a function that takes three arguments: the target object, the accessor name, and the accessor descriptor.

Here's an example of an accessor decorator:

function logAccessor(target: Object, key: string, descriptor: PropertyDescriptor) {
  const originalGetter = descriptor.get;
  descriptor.get = function () {
    console.log(`Getting the value of ${key}`);
    return originalGetter.apply(this);
  };
}

class MyClass {
  private _value: number = 0;

  @logAccessor
  get value(): number {
    return this._value;
  }

  set value(newValue: number) {
    this._value = newValue;
  }
}

const instance = new MyClass();
instance.value = 42;
console.log(instance.value); // Output: Getting the value of value
                             // 42

Property Decorators

Property decorators are applied to class properties and can be used to observe or modify the properties. They are declared using the @ symbol, followed by a function that takes two arguments: the target object and the property name.

Here's an example of a property decorator:

function logProperty(target: Object, key: string) {
  let value = target[key];

  const getter = () => {
    console.log(`Getting the value of ${key}`);
    return value;
  };

  const setter = (newValue: any) => {
    console.log(`Setting the value of ${key} to ${newValue}`);
    value = newValue;
  };

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

class MyClass {
  @logProperty
  public value: number;
}

const instance = new MyClass();
instance.value = 42;
console.log(instance.value); // Output: Setting the value of value to 42
                             //         Getting the value of value
                             //         42

Conclusion

In this article, we covered TypeScript decorators, including class decorators, method decorators, accessor decorators, and property decorators. These decorators can help you enhance classes, methods, and properties, making your TypeScript code more expressive and powerful. In the next article, we will discuss how to configure and use the TypeScript compiler for optimal development experience and performance.

Programming 101