Show List
Tutorials > TypeScript > Decorators in TypeScript

Decorators in TypeScript

Decorators are a feature of TypeScript that allow you to modify the behavior of a class, method, property, or parameter by using a special syntax. Decorators provide a way to add additional functionality to existing code, without having to change the code itself.

Here's a simple example of how you could define a class decorator in TypeScript

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

@logClass
class User {
  name: string;
  age: number;
  email: string;

  constructor(name: string, age: number, email: string) {
    this.name = name;
    this.age = age;
    this.email = email;
  }
}

In this example, the logClass function is a class decorator that takes the target class as its argument. The @logClass syntax before the User class definition is used to apply the logClass decorator to the class. When the class is instantiated, the logClass decorator will log the name of the class to the console.

Here's another example of how you could define a method decorator in TypeScript:

function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  console.log(`Method: ${key}`);
}

class User {
  name: string;
  age: number;
  email: string;

  constructor(name: string, age: number, email: string) {
    this.name = name;
    this.age = age;
    this.email = email;
  }

  @logMethod
  getFullName() {
    return `${this.name} (${this.age})`;
  }
}

In this example, the logMethod function is a method decorator that takes the target object, the name of the method, and a PropertyDescriptor object as its arguments. The @logMethod syntax before the getFullName method definition is used to apply the logMethod decorator to the method. When the method is called, the logMethod decorator will log the name of the method to the console.

Decorators can also be used with properties and parameters. For example, here's a simple example of how you could define a property decorator in TypeScript:

function logProperty(target: any, key: string) {
  console.log(`Property: ${key}`);
}

class User {
  @logProperty
  name: string;

  @logProperty
  age: number;

  @logProperty
  email: string;

  constructor(name: string, age: number, email: string) {
    this.name = name;
    this.age = age;
    this.email = email;
  }
}
In this example, the logProperty function is a property decorator that takes the target object and the name of the property as its arguments. The @logProperty syntax before the name, age, and email property definitions is used to apply the logProperty decorator to the properties. When the properties are accessed, the logProperty decorator will log the name of the property to the console.
And here's an example of how you could define a parameter decorator in TypeScript:
function logParameter(target: any, key: string, index: number) {
  console.log(`Parameter: ${key} - ${index}`);
}

class User {
  name: string;
  age: number;
  email: string;

  constructor(
    @logParameter name: string,
    @logParameter age: number,
    @logParameter email: string
  ) {
    this.name = name;
    this.age = age;
    this.email = email;
  }
}

In this example, the logParameter function is a parameter decorator that takes the target object, the name of the method, and the index of the parameter as its arguments. The @logParameter syntax before the parameters in the constructor is used to apply the logParameter decorator to the parameters. When the constructor is called, the logParameter decorator will log the name of the method and the index of the parameter to the console.

Decorators are a powerful and flexible feature of TypeScript that can be used to add additional functionality to existing code in a clean and maintainable way.



Next: Generics in TypeScript

    Leave a Comment

  • captcha text