When multiple decorators "apply to a" declaration, their evaluation is similar-function composition in mathematics . In this model, when composing functions f and G, the resulting composite (F ° g) (x ) is equivalent to f(g(x)).
As such, the following steps is performed when evaluating multiple decorators on a single declaration in TypeScript:
- The expressions for each decorator is evaluated Top-to-bottom.
- The results is then called as functions from Bottom-to-top.
If we were to use decorator factories, we can observe this evaluation order with the following example:
function f () {Console.log ("f (): evaluated"); returnfunction (target, PropertyKey:string, Descriptor:propertydescriptor) {Console.log ("f (): called"); }}function g () {Console.log ("g (): Evaluated"); returnfunction (target, PropertyKey:string, Descriptor:propertydescriptor) {Console.log ("g (): Called"); }}classC {@f () @g () method () {}}/*f (): Evaluatedg (): Evaluatedg (): Calledf (): Called*/
[ES7] Descorator:evaluated & Call Order