TypeScript Decorators: Adding Metadata to Your Code

Are you tired of writing the same code over and over again? Do you want to add some extra functionality to your TypeScript code without having to rewrite everything? If so, then TypeScript decorators are the answer you've been looking for!

TypeScript decorators allow you to add metadata to your code, which can be used to modify the behavior of your classes, methods, and properties. This metadata can be used by other parts of your code to provide additional functionality, such as logging, validation, or even dependency injection.

In this article, we'll explore the basics of TypeScript decorators, how to use them, and some of the most common use cases for decorators in TypeScript.

What are TypeScript Decorators?

TypeScript decorators are a way to add metadata to your code. They are similar to annotations in Java or attributes in C#, but with some additional features that make them more powerful.

Decorators are functions that can be applied to classes, methods, properties, and parameters. When a decorator is applied to a target, it modifies the behavior of that target in some way. For example, a decorator applied to a class can add additional methods or properties to the class, while a decorator applied to a method can modify the behavior of that method.

Decorators are defined using the @ symbol followed by the name of the decorator function. For example, here's a simple decorator that logs the name of a class:

function logClass(target: any) {
  console.log(target.name);
}

This decorator can be applied to a class like this:

@logClass
class MyClass {
  // ...
}

When the MyClass class is defined, the logClass decorator is called with the class as its argument. In this case, the decorator simply logs the name of the class to the console.

Using Decorators in TypeScript

Now that we know what decorators are, let's look at how to use them in TypeScript.

Class Decorators

Class decorators are applied to classes and modify the behavior of the class itself. They are defined using a function that takes the class constructor as its argument. Here's an example of a class decorator that adds a log method to a class:

function addLogMethod(target: any) {
  target.prototype.log = function(message: string) {
    console.log(`[${target.name}] ${message}`);
  };
}

This decorator adds a log method to the prototype of the class. The log method takes a message as its argument and logs it to the console with the name of the class.

To apply this decorator to a class, we use the @ symbol followed by the name of the decorator function:

@addLogMethod
class MyClass {
  // ...
}

Now, any instance of MyClass will have a log method that can be used to log messages to the console:

const myInstance = new MyClass();
myInstance.log('Hello, world!'); // logs "[MyClass] Hello, world!"

Method Decorators

Method decorators are applied to methods and modify the behavior of the method itself. They are defined using a function that takes three arguments: the target object, the name of the method, and a property descriptor object. Here's an example of a method decorator that logs the arguments passed to a method:

function logArguments(target: any, methodName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`[${target.constructor.name}.${methodName}]`, ...args);
    return originalMethod.apply(this, args);
  };
}

This decorator replaces the original method with a new method that logs the arguments passed to the method before calling the original method.

To apply this decorator to a method, we use the @ symbol followed by the name of the decorator function:

class MyClass {
  @logArguments
  myMethod(arg1: string, arg2: number) {
    // ...
  }
}

Now, when myMethod is called, the arguments passed to the method will be logged to the console:

const myInstance = new MyClass();
myInstance.myMethod('Hello', 42); // logs "[MyClass.myMethod] Hello 42"

Property Decorators

Property decorators are applied to properties and modify the behavior of the property itself. They are defined using a function that takes two arguments: the target object and the name of the property. Here's an example of a property decorator that adds a getter and setter to a property:

function addGetterSetter(target: any, propertyName: string) {
  let value: any;
  Object.defineProperty(target, propertyName, {
    get() {
      console.log(`[${target.constructor.name}.${propertyName}] get`);
      return value;
    },
    set(newValue: any) {
      console.log(`[${target.constructor.name}.${propertyName}] set`, newValue);
      value = newValue;
    },
  });
}

This decorator adds a getter and setter to the property. The getter logs a message when the property is accessed, while the setter logs a message when the property is set.

To apply this decorator to a property, we use the @ symbol followed by the name of the decorator function:

class MyClass {
  @addGetterSetter
  myProperty: string;
}

Now, when myProperty is accessed or set, a message will be logged to the console:

const myInstance = new MyClass();
myInstance.myProperty = 'Hello'; // logs "[MyClass.myProperty] set Hello"
console.log(myInstance.myProperty); // logs "[MyClass.myProperty] get" followed by "Hello"

Parameter Decorators

Parameter decorators are applied to the parameters of a method and modify the behavior of the parameter itself. They are defined using a function that takes three arguments: the target object, the name of the method, and the index of the parameter. Here's an example of a parameter decorator that logs the value of a parameter:

function logParameter(target: any, methodName: string, parameterIndex: number) {
  const originalMethod = target[methodName];
  target[methodName] = function(...args: any[]) {
    console.log(`[${target.constructor.name}.${methodName}]`, args[parameterIndex]);
    return originalMethod.apply(this, args);
  };
}

This decorator replaces the original method with a new method that logs the value of the specified parameter before calling the original method.

To apply this decorator to a parameter, we use the @ symbol followed by the name of the decorator function:

class MyClass {
  myMethod(@logParameter arg1: string, arg2: number) {
    // ...
  }
}

Now, when myMethod is called, the value of arg1 will be logged to the console:

const myInstance = new MyClass();
myInstance.myMethod('Hello', 42); // logs "[MyClass.myMethod] Hello"

Common Use Cases for TypeScript Decorators

Now that we know how to use decorators in TypeScript, let's look at some common use cases for decorators.

Logging

Decorators can be used to add logging functionality to your code. For example, you can use a class decorator to add a log method to all of your classes, or a method decorator to log the arguments passed to a method.

Validation

Decorators can be used to add validation functionality to your code. For example, you can use a property decorator to validate the value of a property before it is set, or a method decorator to validate the arguments passed to a method.

Dependency Injection

Decorators can be used to implement dependency injection in your code. For example, you can use a class decorator to automatically inject dependencies into your classes, or a parameter decorator to inject dependencies into the parameters of a method.

Caching

Decorators can be used to add caching functionality to your code. For example, you can use a method decorator to cache the result of a method, so that it doesn't need to be recalculated every time it is called.

Conclusion

TypeScript decorators are a powerful tool for adding metadata to your code. They can be used to modify the behavior of your classes, methods, properties, and parameters, and can be used to add additional functionality such as logging, validation, dependency injection, and caching.

In this article, we've explored the basics of TypeScript decorators, how to use them, and some common use cases for decorators in TypeScript. With this knowledge, you can start using decorators to make your code more efficient, maintainable, and extensible.

Editor Recommended Sites