[Decorator in Angular] - Introduction to decorators

        Decorators have become popular because of their widespread use in Angular. In Angular, because of the use of TypeScript, decorators are available.

        But in JavaScript, decorators are currently still a stage 2 proposal, which means that decorators will be part of future updates to the language.

        This article focuses on what decorators are and how to use them to make code clearer and easier to understand.

1. What is a decorator

        In its simplest form of use, a decorator is a way of wrapping one piece of code around another, literally "decorating" code. You may have heard of this approach before, the concept of composite functions or higher-order functions.

        This kind of decoration is already possible in standard JavaScript, just simply use one method to wrap another method:

// 目标方法
function sayHello(name) {
  console.log('Hello, ' + name);
}
//作为装饰的方法
function loggingDecorator(wrappedMethod) {
  return function () {
    console.log(`call function ${wrappedMethod.name} start`);
    const result = wrappedMethod.apply(this, arguments);
    console.log(`call function ${wrappedMethod.name} end`);
    return result;
  }
}
//包裹后的方法
const wrappedHello = loggingDecorator(sayHello);
//装饰后的方法调用
wrappedHello("HanMeiMei");

        This example constructs a new method wrappedHello , which is returned by the loggingDecorator(sayHello) method, which performs the same operation as the sayHello() method. The difference is that wrappedHello has more log printing actions before and after the target method call. Run the code, the output is as shown below:

         The same decoration method can also be used to "decorate" other target methods:

function sayHi(name){
    console.log('Hi, ' + name);
}
const wrappedHi = loggingDecorator(sayHi);
wrappedHi("HanMeiMei");

        operation result:

 2. How to use decorators

        Decorators use a special syntax in JavaScript, that is, they are prefixed with the @ symbol and placed before the code being decorated.

        Since the current browser or Node version does not support decorators, debugging cannot be performed directly in the browser. The decorators demonstrated in this article are all debugged and run in the Angular environment.

        The following example demonstrates the use of decorators for simple classes:

function changePrice<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        price = 666;
    };
}
 
@changePrice
export class Grape {
    price: number = 0;
    constructor(price: number) {
        this.price = price;
        console.log(`constructor price : ${this.price}`);
    }
}
 
//组件中调用代码
let grape = new Grape(4);
console.log(grape);

        The decorator method is applied above the definition of the class Grape by using @ plus the decorator name. In the above example, the decorator method changePrice extends the construction method of the target class and sets the value of the price field to 666. The decorator method What is returned is a new constructor. Running the code prints the following:

It can be seen that the extended constructor returned by the decorator changePrice is called through new Grape(4)          in the component , where price is set to 666 . It is equivalent to calling 

this.price = price;
console.log(`constructor price : ${this.price}`);

Then call this.price = 666;         again  .

        This is the end of the brief introduction about decorators, and the specific decorators will be introduced later.