The principle of the adorner in typescript

Adorners on different declarations in a class will be applied in the order specified below:

1. Parameter adorners, followed by the method adorner, the accessor adorner, or the property adorner applied to each instance member.

2. Parameter adorners, followed by the method adorner, the accessor adorner, or the property adorner applied to each static member.

3. The parameter adorner is applied to the constructor.

4. class adorners apply to classes. 1.1 class Decoration

The constructor of the class as its unique parameter. 1.1.1 Examples:

1.	function Dectest (constructor:function) {
2.	    Console.log (Constructor ("hello!"));
3.	}
4.	
5.	@decTest
6.	Class Greeter {
7.	    greeting:string;
8.	    Constructor (message:string) {
9.	        this.greeting = message;	        Console.log ("in constructor:", message);
One.	    Greet () {
.	        Return "Hello," + this.greeting;
.	}

The 1th line defines an adorner function dectest;

Line 5th installs the Dectest adorner on the class Greeter class.

To get after compiling:

1. var __decorate = (this && this._decorate) | |	    function (decorators, target, key, desc) {2. var c = arguments.length, R = C < 3? Target:desc = = null?
desc = object.getownpropertydescriptor (target, key): Desc, D;  3. if (typeof reflect = = = "Object" && typeof reflect.decorate = = "function") R = reflect.decorate (Decorators,
Target, key, DESC); 4. Else for (var i = decorators.length-1 i >= 0; i--) if (d = decorators[i]) R = (C < 3? d (r): C > 3? d (Target, Key, R): D (target, key)) | |
R
5. Return C > 3 && r && object.defineproperty (target, Key, R), R;
6.};	    7. Function Dectest (constructor) {8.
Console.log (Constructor ("hello!"));	9.} 10.	    var Greeter = (function () {11.	        function Greeter (message) {12.
this.greeting = message;
Console.log ("in constructor:", message);	    14.} 15.	        Greeter.prototype.greet = function () {16.
Return "Hello," + this.greeting;
17.};	   18. Greeter = __decorate ([19.	    Dectest 20.
], Greeter);
return Greeter; 22.} ());

Description

Line 1th defines a __decorate function that handles the function of the class adorner.

Line 10th defines a function, as you can see from line 22nd, that the function is called from, and in line 18th, the function calls the __decorate function. 1.1.2 Simplification

In line 1th

(This && this._decorate)

is to avoid repeating the definition of the __decorate function. Note the strange rules of the && operator in JavaScript. If the __decorate function is undefined, the value of the expression above is undefined, which is equivalent to false. So we get:

var __decorate = function (decorators, target, key, desc) {...}

Line 18th shows that when the __decorate function is invoked, only 2 arguments are given, one is an array containing multiple class adorners, only one class adorner is used, and the other is the constructor greeter () of the Greeter class. In this way, the __decorate function is called decorators an adorner array, target is a constructor greeter (), the key and DESC are not used, and the value is undefined. The __decorate function here is a generic code for various adorners, and both key and DESC are used in the method adorner.

The 2nd line of argument number is 2 in the class adorner, and is obviously less than 3.

Line 3rd indicates that if the system supports reflection, the reflect.decorate (Decorators,target, key, desc) method is used directly. Otherwise, you define the code that implements the adorner mechanism.

This allows you to simplify the compiled JS code to:

1.	var __decorate = function (decorators, target, key, desc) {
2.	    R = target;
3. For	    (var i = decorators.length-1 i >= 0; i--)
4.	        if (d = decorators[i]) R = d (r);
5. return	    R;
6.	};
7.	
8.	function Dectest (constructor) {
9.	    Console.log (Constructor ("hello!"));
One
.	var Greeter = (function () {
.	    function Greeter (message) {	        this.greeting = message;	        Console.log ("in constructor:", message);
.	    Greeter.prototype.greet = function () {
.	        Return "Hello," + this.greeting;
A.	    };	    Greeter = __decorate ([
.	        Dectest	    ], Greeter);
return	    Greeter;
.	} ());

Line 3rd invokes the constructor greeter (message) as a parameter to the adorner function dectest. You can see that line 3rd implements the stacking of class adorners, which are processed first, followed by the previous. Like what:

1.	@a
2.	@b
3.	Class C {
4.
... 5.	}

Handle the adorner B first, and then handle the adorner a.

Line 22nd Returns the constructor greeter (message). The final 11th row of the variable greeter is equal to this constructor. Note: Essentially, objects in JavaScript are created by functions.

Line 19th actually modifies the behavior of the Greeter class's constructor greeter (message) through the class adorner function, thus modifying the object's attributes, such as adding interfaces, injecting class members ... Wait a minute.

var gt = new Greeter ("My Hello");

Output:

In Constructor:my Hello

class adorners in 1.1.3 angular

The components in angular write this:

1.	Import {Component} from ' @angular/core ';
2.	
3.	@Component ({
4.	  Selector: ' App-root ',
5.	  Templateurl: './app.component.html ',
6.	  Styleurls: ['./app.component.css ']
7.	})
8.	Export class Appcomponent {
9.	  title = ' App ';
Ten	}

After compiling:

1. "Use strict"; 2. var __decorate = (this && this.__decorate) | |	    function (decorators, target, key, DESC) {3. var c = arguments.length, R = C < 3? Target:desc = = null?
desc = object.getownpropertydescriptor (target, key): Desc, D;  4. if (typeof reflect = = = "Object" && typeof reflect.decorate = = "function") R = reflect.decorate (Decorators,
Target, key, DESC); 5. Else for (var i = decorators.length-1 i >= 0; i--) if (d = decorators[i]) R = (C < 3? d (r): C > 3? d (Target, Key, R): D (target, key)) | |
R
6. Return C > 3 && r && object.defineproperty (target, Key, R), R;
7.};
8. Exports.__esmodule = true;
9. var core_1 = require ("@angular/core");	    var appcomponent = (function () {11.	        function Appcomponent () {12.
this.title = ' app ';	    13.} 14.	        Appcomponent = __decorate ([15.	            Core_1.component ({16.	            Selector: ' App-root ', 17. Templateurl: './app.component.html ', 18.	        Styleurls: ['./app.component.css '] 19.	    }) 20.
], appcomponent);
return appcomponent;
22.} ()); Exports. Appcomponent = appcomponent;

As you can imagine from line 14th, the @component adorner in angular adds some class member information to the component class. 1.1 Method Adorners 1.1.1 Examples

The method adorner expression is called at run time as a function, passing in the following 3 parameters:

1, for static members is the constructor of the class, for instance members is the prototype object of the class.

2. The name of the member.

3, the member's property descriptor.

Note If the code output target version is less than ES5, the attribute descriptor will be undefined.

If the method adorner returns a value, it is used as a property descriptor for the method.

Note If the code output target version is less than the ES5 return value, it will be ignored.

1.	function Decotest (Value:boolean, str:string) {
2.	    return function (Target:any, propertykey:string, Descriptor:propertydescriptor) {
3.	        descriptor.enumerable = value;
4.	        Console.log ("Value:----", value);
5.	        Console.log ("str:----", str);
6.	        Console.log ("target----", target);
7.	        Console.log ("propertykey----", propertykey);
8.	        Console.log ("descriptor----", descriptor);
9.	    };
One.	Class Greeter {
.	    greeting:string;	    Constructor (message:string)
.	        this.greeting = message;
.	    @decoTest (False, "mystr")
.	    Greet () {
.	        Return "Hello," + this.greeting;
.	}	
.	var gr = new Greeter ("Mymessage");	Console.log (Gr.greet ());

Line 18th installs the adorner on the greet function with 2 parameters;

The 1th behavior adorner function, which displays the parameter values through the Console.log function.

After compiling:

1. var __decorate = (this && this.__decorate) | |	    function (decorators, target, key, desc) {2. var c = arguments.length, R = C < 3? Target:desc = = null?
desc = object.getownpropertydescriptor (target, key): Desc, D;  3. if (typeof reflect = = = "Object" && typeof reflect.decorate = = "function") R = reflect.decorate (Decorators,
Target, key, DESC); 4. Else for (var i = decorators.length-1 i >= 0; i--) if (d = decorators[i]) R = (C < 3? d (r): C > 3? d (Target, Key, R): D (target, key)) | |
R
5. Return C > 3 && r && object.defineproperty (target, Key, R), R;
6.};	    7. Function Decotest (value, str) {8.	        return function (target, PropertyKey, descriptor) {9.
descriptor.enumerable = value;
Console.log ("Value:----", value);
Console.log ("str:----", str);
Console.log ("target----", target);
Console.log ("propertykey----", propertykey); Console.log ("Descriptor----", descriptor);
15.};	16.} 17.	    var Greeter = (function () {18.	        function Greeter (message) {19.
this.greeting = message;	    20.} 21.	        Greeter.prototype.greet = function () {22.
Return "Hello," + this.greeting;
23.};	        __decorate ([25.	    Decotest (False, "mystr") 26.
], Greeter.prototype, "greet", null);
return Greeter;
28.} ());
var gr = new Greeter ("Mymessage"); Console.log (Gr.greet ());

Line 1th defines the function __decorate that implements the adorner mechanism, and line 24th calls the function, which contains 4 parameters: an array of adorner functions, a prototype of the greeter function, a function greet with an adorner installed, and a null value. 1.1.1 Simplification

The number of arguments in line 2nd is greater than 3;DESC value is null; The system does not support reflection in ES6;

Line 24th does not use the return value of the __decorate function;

JS code can be simplified to:

1. var __decorate = function (decorators, target, key, desc) {2.
R = Object.getownpropertydescriptor (target, key);	        3. for (var i = decorators.length-1 i >= 0; i--) 4.	            if (d = decorators[i]) 5.
D (Target, key, R);
6.};	7.8.	    function decotest (value, str) {9.	        return function (target, PropertyKey, descriptor) {10.
descriptor.enumerable = value;
Console.log ("Value:----", value);
Console.log ("str:----", str);
Console.log ("target----", target);
Console.log ("propertykey----", propertykey);
Console.log ("descriptor----", descriptor);
16.};	17.} 18.	    var Greeter = (function () {19.	        function Greeter (message) {20.
this.greeting = message;	    21.} 22.	        Greeter.prototype.greet = function () {23.
Return "Hello," + this.greeting;
24.};	        __decorate ([26.	    Decotest (False, "mystr") 27.
], Greeter.prototype, "greet", null); Return GrEeter;
29.} ());
var gr = new Greeter ("Mymessage"); Console.log (Gr.greet ());

Program output:

Value:----False
str:----mystr
target----Greeter {greet: [Function]}
propertykey----greet
Descriptor----{value: [Function],
  writable:true,
  enumerable:false,
  configurable:true}
Hello, Mymessage

In line 1th, the decorators is an adorner array that supports multiple adorners, and Target is the prototype of the Greeter class, and the key and PropertyKey are the object function name strings of the adorner.

Line 3rd supports adorner stacking, stacking order from inside to outside.

Note Line 5th, the call that is raised is Decotest (false, "mystr") (Target, Key, R), Decotest (False, "mystr") returns a function.

You can see the function of the method adorner: increase the function of the method, modify the property of the method, and then add the class attribute members and function members to the class through Greeter.prototype.