TypeScript Decorators: Adding Metadata and Behaviour to your Classes and Methods

TypeScript has become the go-to language for many developers due to its exceptional features, like static type checking, class definitions, generics, and much more. With TypeScript, it's possible to write object-oriented code more efficiently, make it more secure, and prevent many runtime errors.

One feature that many TypeScript developers are utilizing is the decorators. Decorators provide a way of adding metadata and behaviour to classes and their members at design time. In this article, we'll dig into TypeScript decorators and see how they can be used to add additional functionality to our code.

What are TypeScript Decorators?

Decorators are functions that can be applied to classes and their members to add metadata and behaviour to them. Decorators can be used to augment the functionality of a class or even to modify the behaviour of a function.

Decorators are applied using the @ symbol followed by the decorator function name. Decorators can be added to the following TypeScript entities:

• Classes
• Properties
• Methods
• Accessors
• Parameter declarations

To use decorators in your TypeScript code, you first need to enable the --experimentalDecorators flag in your TypeScript compiler options.

Types of Decorators

Decorators in TypeScript are classified into four types, and they each serve a specific purpose. They are:

1. Class Decorators: These are applied to a class constructor and can be used to modify or replace the constructor function.

2. Property Decorators: These are applied to class properties and can provide additional functionality.

3. Method Decorators: These are applied to class methods and can be used to augment or replace their functionality.

4. Parameter Decorators: These are used to provide additional information about function parameters.

How to Use Decorators in TypeScript

To use decorators in TypeScript, simply apply them to the class or member you want to decorate. Here is an example:

@myclassdecorator
class MyClass {
  @mypropertydecorator
  myProperty: string;

  @mymethoddecorator
  myMethod() {
    //...
  }

  myOtherMethod(@myparameterdecorator arg: string) {
    //...
  }
}

In this example, the @myclassdecorator decorator is applied to the MyClass class constructor, and the @mypropertydecorator decorator is applied to the myProperty property. The @mymethoddecorator decorator is applied to the myMethod method, and the @myparameterdecorator decorator is applied to the arg parameter of myOtherMethod.

Working with Class Decorators

Class decorators are applied to the constructor function of a class and can modify the class behaviour or even replace it entirely. Class decorators receive the constructor function as their only parameter and can return a new constructor function to replace the existing one. Here is an example of a simple class decorator:

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

@MyClassDecorator
class MyClass {
  //...
}

In this example, the MyClassDecorator function is applied to the MyClass constructor. When we try to run this code, we'll see that the decorator will log "MyClassDecorator called on: ", followed by the MyClass constructor function.

Working with Property Decorators

Property decorators are applied to class properties, and they receive two parameters: the class prototype and the property name. Property decorators can be used for a wide range of tasks, including validating input, setting default values, and handling changes to property values. Here is an example of a simple property decorator:

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

class MyClass {
  @MyPropertyDecorator
  myProperty: string;
}

In this example, the MyPropertyDecorator function is applied to the myProperty property of the MyClass class. When we try to run this code, we'll see that the decorator will log "MyPropertyDecorator called on: " followed by the MyClass prototype and the property name myProperty.

Working with Method Decorators

Method decorators are applied to class methods and can be used for a wide range of tasks, including logging, profiling, and providing security checks. Method decorators receive three parameters: the class prototype, the method name, and a property descriptor object. Here is an example of a simple method decorator:

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

class MyClass {
  @MyMethodDecorator
  myMethod() {
    //...
  }
}

In this example, the MyMethodDecorator function is applied to the myMethod method of the MyClass class. When we try to run this code, we'll see that the decorator will log "MyMethodDecorator called on: " followed by the MyClass prototype, the method name myMethod, and a property descriptor object.

Working with Parameter Decorators

Parameter decorators are used to modify function parameters, and they receive three parameters: the class prototype, the method name, and the parameter index. Parameter decorators can be used for a wide range of tasks, including validation, parameter injection, and security checks. Here is an example of a simple parameter decorator:

function MyParameterDecorator(target: any, methodName: string, parameterIndex: number) {
  console.log("MyParameterDecorator called on: ", target, methodName, parameterIndex);
}

class MyClass {
  myMethod(@MyParameterDecorator myParameter: string) {
    //...
  }
}

In this example, the MyParameterDecorator function is applied to the myParameter parameter of the myMethod method of the MyClass class. When we try to run this code, we'll see that the decorator will log "MyParameterDecorator called on: " followed by the MyClass prototype, the method name myMethod, and the parameter index 0.

Conclusion

Decorators are a powerful feature of TypeScript that allow you to add metadata and functionality to your classes and their properties, methods, accessors, and parameters. Decorators can help you to write more efficient and maintainable code, and they give you the ability to extend the functionality of existing classes and methods.

In addition to the standard built-in decorators that come with TypeScript, you can also create your own custom decorators to fit your specific needs. With TypeScript decorators, you can take your code to the next level and add that extra level of functionality that sets it apart from the rest. So give decorators a try and see the benefits they can bring to your next TypeScript project!

Additional Resources