Previous

TypeScript Introduction to Decorators

Decorators in TypeScript are a powerful feature that allows you to modify or extend the behavior of classes, methods, properties, and parameters at design time. They are often used in frameworks like Angular for tasks like dependency injection, routing, and more. Decorators are a type of meta-programming that lets you attach additional behavior to existing code without modifying it directly.

 

What are Decorators?

A decorator is a special kind of declaration that can be attached to a class, method, accessor, property, or parameter. Decorators are functions that are prefixed with the @ symbol and are used to modify or annotate the elements they are attached to.

Decorators are used to add extra functionality to an existing class or method without altering its structure. This is similar to "modifying" or "augmenting" behavior dynamically.

 

Enabling Decorators in TypeScript

Before using decorators in TypeScript, you need to enable the experimentalDecorators compiler option in your tsconfig.json file.

Example: Enabling Decorators

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
  • This option allows the use of decorators in TypeScript, which are not yet fully standardized in JavaScript.

 

Types of Decorators

Class Decorators
Applied to a class declaration to modify the behavior of the class.

Method Decorators
Applied to a method inside a class, used to modify or enhance the method's functionality.

Accessor Decorators
Applied to a getter or setter method.

Property Decorators
Applied to properties in a class.

Parameter Decorators
Applied to method parameters to modify their behavior.

 

Class Decorators

A class decorator is a function that is applied to the class constructor. It can be used to add properties or methods, change the class prototype, or modify the class behavior.

Example: Class Decorator

function LogClass(target: Function) {
  console.log(`Class ${target.name} has been decorated.`);
}

@LogClass
class Person {
  constructor(public name: string, public age: number) {}
}

let person = new Person('John', 25);  // Output: Class Person has been decorated.
  • In this example, the LogClass decorator is applied to the Person class. When the class is created, the decorator logs a message to the console.

 

Method Decorators

A method decorator is applied to a method. It can be used to modify the method’s behavior, such as logging function calls, measuring performance, or altering the return value.

Example: Method Decorator

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

class Person {
  @LogMethod
  sayHello(name: string) {
    console.log(`Hello, ${name}`);
  }
}

const person = new Person();
person.sayHello('John');  
// Output:
// Calling method: sayHello with args: [ 'John' ]
// Hello, John
  • The LogMethod decorator logs the method name and its arguments before calling the original method.

 

Property Decorators

A property decorator is used to modify properties of a class. It can be used to perform validation, assign default values, or track property access.

Example: Property Decorator

function ReadOnly(target: any, propertyKey: string) {
  const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey) || {};
  descriptor.writable = false;
  Object.defineProperty(target, propertyKey, descriptor);
}

class Person {
  @ReadOnly
  name: string;

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

const person = new Person('John');
person.name = 'Jane';  // Error: Cannot assign to read only property 'name'
  • The ReadOnly decorator makes the name property read-only by setting its writable attribute to false.

 

Parameter Decorators

A parameter decorator is applied to a method’s parameters. It can be used for logging, validation, or modifying the behavior of function arguments.

Example: Parameter Decorator

function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} has been decorated.`);
}

class Person {
  greet(@LogParameter name: string) {
    console.log(`Hello, ${name}`);
  }
}

const person = new Person();
person.greet('John');  // Output: Parameter at index 0 in method greet has been decorated.
  • The LogParameter decorator logs the index of the parameter and the method name where the parameter is used.

 

Decorator Factory

A decorator factory is a function that returns a decorator. This is useful when you want to pass parameters to a decorator.

Example: Decorator Factory

function SetPrefix(prefix: string) {
  return function(target: any, propertyKey: string) {
    const value = target[propertyKey];
    Object.defineProperty(target, propertyKey, {
      get() {
        return prefix + value;
      },
      set(newValue) {
        value = newValue;
      },
    });
  };
}

class Person {
  @SetPrefix('Mr. ')
  name: string;

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

const person = new Person('John');
console.log(person.name);  // Output: Mr. John
  • The SetPrefix decorator factory allows us to add a prefix to the name property.

 

Summary

  • Decorators in TypeScript allow you to modify or extend the behavior of classes, methods, properties, and parameters.
  • They are prefixed with the @ symbol and can be used to add additional functionality, such as logging, validation, or modifying behavior.
  • You can define class decorators, method decorators, property decorators, and parameter decorators to enhance your code.
  • Decorators can also be created with factories to allow customization via parameters.
  • Decorators are a feature of TypeScript and are often used in frameworks like Angular to add extra functionality without modifying the core code directly.
Previous