Flow of execution in TypeScript (Angular)

Question

I am trying to learn descriptors in Angular. I am trying this piece of code just to see how descriptors can manipulate the original methods. But I can see that the @squareLog funtion's "console.log()" statement is getting executed first and rest of the code executes in order. I am 100% noob in Typescript and Angular. Is the output correct? Is this what should have been expected from this code? If no,then did I messed up somewhere down the line?

import { Component } from '@angular/core';

function log(target, name, descriptor){
  //store the original function in a variable
  const original = descriptor.value;
  //do some manipulation with descriptor.value
  descriptor.value = function(){
    console.log("This function is with LOG as the descriptor");
  }
  //return the descriptor
  return descriptor;
}

function squareLog (target, name, descriptor){
  console.log("This function is with SQUARELOG as descriptor");
  const original = descriptor.value;
  descriptor.value = function(...args){
    console.log("Arguments ", args, "were passed in this function");
    const result = original.apply(this, args);
    console.log("The result of the function is ", result);
    return result;
  }
  return descriptor;
}

function classLog(className){
  console.log(className);
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

@classLog
export class AppComponent {
  title: string = 'Demonstration of decriptors';

constructor(){
  this.aSimpleMethod();
  console.log("This statement was generated by constructor: ", this.returnSquare(5));
}
  @log
  aSimpleMethod(){
    console.log("Learning about descriptors");
  }

  @squareLog
  returnSquare(a){
    return a*a;
  }
}

Actual Output:-

please look on this, maybe helps you typescriptlang.org/docs/handbook/decorators.html — user6600549
– user6600549, Commented Feb 2, 2019 at 15:18
Hey thanks guys! But I understood what went wrong there. Since the statements inside the descriptot.value() did not got executed. I though that the functions(here i.e, log, squareLog) which are used as descriptor are executed, only when the function it wraps is invoked( as in this case invoked in the constructor). But it looks like that the code still executes sequential ;and only descriptor.value is executed, when the function(aSimpleMethod, returnSquare) on which descriptors are used is invoked. Function defined for the purpose of being used as descriptors still executes where it is defined. — Shivind
– Shivind, Commented Feb 2, 2019 at 15:28
please consider to upvote my answer, happy to know if I have helped you. — user6600549
– user6600549, Commented Feb 2, 2019 at 15:30

user6600549 · Accepted Answer · 2019-02-02 15:18:46Z

1

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

answered Feb 2, 2019 at 15:18

user6600549

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flow of execution in TypeScript (Angular)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related