Please enable JavaScript.

Coggle requires JavaScript to display documents.

8.2: Decorators - Coggle Diagram

8.2: Decorators

property decorators

declared just before a property declaration

class Product {
  @Log1
  title: string;
  private _price: number;

  set price(val: number) {
    if (val > 0) {
      this._price = val;
    } else {
      throw new Error('Price must be positive');
    }
  }
  constructor(t: string, p: number) {
    this.title = t;
    this._price = p;
  }
  getPriceWithTax(@Log4 tax: number) {
    return this._price * (1 + tax);
  }
}

function definiton

function Log1(target: any, propertyName: string | Symbol) {
  console.log('Property decorator!');
  console.log(target, propertyName);
}

output produced by
class definition

> Property decorator!
> {constructor: ƒ, getPriceWithTax: ƒ} 'title'

accessor decorators

class Product {
  .
  .
  .
  @Log2
  set price(val: number) {
    if (val > 0) {
      this._price = val;
    } else {
      throw new Error('Price must be positive');
    }
  }
  .
  .
  .
}

function definition

function Log2(
  target: any,
  name: string | Symbol,
  descriptor: PropertyDescriptor
) {
  console.log('Accessor decorator!');
  console.log(target);
  console.log(name);
  console.log(descriptor);
}

- - - - price
    - - _price

method decorators

function definiton

function Log3(
  target: any,
  name: string | Symbol,
  descriptor: PropertyDescriptor
) {
  console.log('Method decorator!');
  console.log(target);
  console.log(name);
  console.log(descriptor);
}

class Product {
  .
  .
  .
  @Log3
  getPriceWithTax(tax: number) {
    return this._price * (1 + tax);
  }
  .
  .
  .
}

output produced by
class definition

> Method decorator!
> {constructor: ƒ, getPriceWithTax: ƒ}
> getPriceWithTax
> {writable: true, enumerable: false, configurable: true, value: ƒ}

parameter decorators

class Product {
  .
  .
  .
  getPriceWithTax(@Log4 tax: number) {
    return this._price * (1 + tax);
  }
  .
  .
  .
}

function definiton

function Log4(target: any, name: string | Symbol, position: number) {
  console.log('Parameter decorator!');
  console.log(target);
  console.log(name);
  console.log(position);
}