Decorators: aplicación en métodos

Cabe destacar que a muchos desarrolladores no les gustan los decorators, de hecho era una funcionalidad que se iba a incorporar al estandar de JavaScript, pero a los desarrolladores no les gustó porque rompe con la lógica del lenguaje, por eso lo tenemos que activar en el .tsconfig

Los decorators son muy utilizados en Angular, estos son una declaración que tiene TypeScript para poder extender la funcionalidad de distintos elementos ya sea una clase, un parámetro, una propiedad o una función.

En una función decorator, el parámetro target hace referencia al objeto que posee el decorador y el parámetro propertyKey, o key, hace referencia al elemento que extendemos.

function log(target, key) {
  console.log(key + 'se ha llamado');
}

class Persona3 {
  private name: string;

  constructor(name:string) {
    this.name = name;
  }

  @log
  sayMyName() {
    console.log(this.name);
  }
}

const persona3: Persona3 = new Persona3('Alan');
persona3.sayMyName() // 'Alan' // 'sayMyName se ha llamado'

Podemos agreagar al directorio donde estemos trabajando. el archivo tsconfig.json y habilitar la opción para decorators

{
    "compilerOptions": {
        "target": "ES2020",
        "experimentalDecorators": true
    }
}

Asi el lint que usemos no marcará error al agregar ‘@<decorator>’ en proximos ejercicios

Probé ejecutar el código y por lo que veo, sólo la primera vez que se llama al método, se ejecuta el decorator log, pero si lo ejecuto una segunda vez, ya no funciona el decorator 😦

Hay algo que Alan se olvido mencionar y que es importante cuando queremos ejecutar un ejemplo simple de decorators y es que el tsconfig.json tiene que apuntar a ES5, mirad este ejemplo:
https://repl.it/@tecnocrata/DecoratorsInMethods

buenas noches, excelente curso. Si la function sayMyName tendría argumentos podría modificar los argumentos. Lo que se me esta ocurriendo es algo asi.

@Adapter()
getUser(request: Request){
http.get(url, request);
}

el decorador podria hacer algun filtro sobre el argumento ?

Interesante la forma en que los decorators son utilizados como funciones extras para complementar nuestra funcion principal. He trabajado con decorators en funciones y son muy poderosos, no solo se pueden extender funciones, también permiten hacer validaciones avanzadas y muy prácticas. También los decorators se usan en muchos casos como parte de la documentación de servicios en API

No es algo desordenado???. Hay que rescribir la clase pero con el metodo afuera de ella

Se debe tener una configuración puntual, ya que me pide el tipo de dato para los parametros de entrada de la función log

//target hace representacion al elemento que contenga el elemento que estamos extendiendo su funcionalidad "Persona"
//Key hace referencia al metodo
function log(target, key){
    console.log(key + 'se ha llamado');
}

class Persona{
    private name: string;
    
    constructor(name: string){
        this.name = name;
    }
    //log es nuestra function con el @log esta se implementa en el metodo sayMyName
    @log
    sayMyName(){
        console.log(this.name);
    }
}

const persona: Persona = new Persona('Alejandro')
persona.sayMyName(); //'Alejandro' //'SayMyName se ha llamado```

Una duda, ¿Que pasaría si colo coloco el decorador al inicio de la clase Persona?

function log(target, key) {
    console.log(key + 'Se ha llamado')
}

@log
class Persona{
    private name: String;
    constructor(name: String){
        this.name = name;
    }
    sayMyName(){
        console.log(this.name);
    }
}

const persona: Persona = new Persona('Ada');
persona.sayMyName()

¿Se ejecutaría la function log cada que se instancia un objeto Persona o cada que ejecuto un método de la clase Persona?

Los decorators son muy utilizados en Angular, estos son una declaración que tiene TypeScript para poder extender la funcionalidad de distintos elementos ya sea una clase, un parámetro, una propiedad o una función.

En una función decorator, el parámetro target hace referencia al objeto que posee el decorador y el parámetro propertyKey, o key, hace referencia al elemento que extendemos.

En una función decorator, el parámetro target hace referencia al objeto que posee el decorador y el parámetro propertyKey, o key, hace referencia al elemento que extendemos.

No tendría más sentido implementar decorators sobre objetos y no ha clases? … Así solo modificamos un objeto en especifico y no a todos los objetos que instancia de esa clase?

Un poco confuso y mas si no hay pruebas del codigo

en angular es muy usado los decoradores.