Decorators: aplicación en propiedades

mi experiencia hasta ahora con el curso:

• Hace una semana empecé el curso y al llegar a esta parte pensaba que el curso era poco claro y todo me parecía confuso, caí en la incertidumbre
• Llegué hasta la clase 21 y seguía algo confundido, decidí probar hacer el Curso de Angular (el que le sigue a este) y ver si todo esto lo podía entender mejor más tarde
• Vi hasta la clase 10 del Curso de Angular y lo entendí sin problemas, en ese curso también había un enlace hacia la documentación de Angular
• Leí casi completamente la sección “Empezando” de la documentación de Angular, entendí todo hasta ese momento sabiendo SOLO EL CONCEPTO de los Decorators, no el como aplicarlos
• Luego entendí que los Decorators son usados todo el tiempo en Angular así que era mejor volver a este Curso, TypeScript con Angular
• Volví a ver cada clase de Decorators y “mágicamente” estoy entendiendo todo sin problemas

Quizás en un principio la incertidumbre me consumió o quizás al leer y entender parte de la´documentación de Angular SABIENDO SOLO EL CONCEPTO de Decorators me dio la seguridad para volver hasta acá y entender esto

Ahora los Decorators no me parecen ni difíciles ni confusos 😃

no entendi ni madres

Si pongo this[key] no me funciona, funciona con target[key]

Creo que el ejemplo implementado es incorrecto, aqui les paso uno que si va a ejecutar

function logProperty(target:any, key:any) {
  let _val:any = target[key];
  const getter = () => {
    console.log(`Get: ${key} => ${_val}`);
    return _val;
  }
  const setter = (newValue:any) => {
    console.log(`Set: ${newValue} => ${key}`);
    _val = newValue;
  }
  
  const objectProperty = {
    get: getter,
    set: setter
  }
  
  // Sobre-escritura de las propiedades 
  Object.defineProperty(target, key, objectProperty);
}

class Persona {
  @logProperty
  public name: string;

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

const p = new Persona('Alan');
p.name = 'Platzi'; // Set: name => 'Platzi'
const myName = p.name; // Get: name => 'Platzi'

Si quieren probar como funciona aqui les dejo un link: https://repl.it/@tecnocrata/DecoratorsInProperties

Mi aporte a este tema, hubo que colocar los tipos a varios elementos, como el target, el key y el newValue por ejemplo, el this no funciono ya que el “this” implicitamente no tiene anotación de tipo any

function logProperty(target:any, key: any) {
// vamos a obtener lo que llega
let _val = target[key];
// creamos el setter y el getter
const getter = () => {
console.log(Get: ${key} => ${_val});
return _val;
}
const setter = (newValue: any) => {
console.log(Set: ${key} => ${newValue});
_val = newValue;
}

// los guardamos en un objeto
const objectProperty = {
get: getter,
set: setter
}

// sobre escribimos las propiedades del objeto
Object.defineProperty(target, key, objectProperty);
}

class Persona {
@logProperty
public name: string;

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

const p = new Persona(‘Alan’);
p.name = ‘Platzi’; // Set: name => 'Platzi’
const myName = p.name; // Get: name => ‘Platzi’

// APLICACIÓN DE PROPIEDADES

// vamos a sobreescribir los setters y getters por nuevas propiedades
function logProperty(target, key) {
  // vamos a obtener el elemento que llega
  const _val = this[key];
  // crearemos los nuevos getters y setters para sobreescribir
  const getter = () => {
    console.log(`Get: ${key} => {_val}`);
    return _val;
  }
  const setter = (newValue) => {
    console.log(`Set: ${key} => ${newValue}`);
    _val = newValue;
  }
  
  // los guardamos en un objeto
  const objectProperty = {
    get: getter,
    set: setter
  }
  
  // sobreescribimos las propiedades 
  Object.defineProperty(target, key, objectProperty);
}

class Persona {
  @logProperty
  private name: string;

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

const p = new Persona('Alan');
p.name = 'Platzi'; // Set: name => 'Platzi'
const name = p.name; // Get: name => 'Platzi'

le falta mejor explicación y ejemplos

Hay que acotar algunas correcciones al código:

1. function logProperty(target:any, key:any){}  // Argumentos deben ser tipo any
2. let _val:any = target[key]; // propiedad debe ser tipo any
3. const setter = (newValue:any) // Argumento debe ser tipo any
 

Por lo que veo los decorator es una manera mas limpia y ordenada de escribir código, divide y vencerás dijeron

A todos aquellos que estan realizando el ejemplo en ejecucion del Typescript compiler, es necesario deshabilitar el modo estricto, en el tsconfig.json. Para hacerlo el atributo strict debe estar en su valor false.

EJ:

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "strict": false, 
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true ,
    "emitDecoratorMetadata": true ,

    /* Advanced Options */
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  }
}

Yo estoy realizando los ejemplos con nodejs, por ende no es necesario que tengan el atributo moduleResolution descomentado, pueden realizar los ejemplos tambien con el browser con un archivo HTML y el ts compiler.

Si esta utilizando nodejs para para los ejemplos, es necesario tener el moduleResolution con el valor de node.

Esta es una explicación que hubiera quedado mejor con el código ya escrito o utilizando algún ejemplo anterior. Se pierde la parte importante de la aplicación de decoradores entre todo lo demás.

Otro ejemplo…

function logProperty(target, key) {

    let _val = target[key];

    const getter = () => {
        console.log('Get', _val, 'from:', target, key);
        return _val;
    };

    const setter = (new_Value) => {
        _val = new_Value;
        console.log('Set', _val, 'to:', target, key);
        
    };

    Object.defineProperty(
        target,
        key,
        {
            get: getter,
            set: setter
        }    
    );
}


class Student {

    @logProperty
    name: string;
}


class Teacher {

    @logProperty
    name: string;
}


const student = new Student();
student.name = 'Estudiante de Platzi';

const teacher = new Teacher();
teacher.name = 'Alan Buscaglia';

teacher.name = student.name;

/* output */
// Set Estudiante de Platzi to: Student {} name
// Set Alan Buscaglia to: Teacher {} name
// Get Estudiante de Platzi from: Student {} name
// Set Estudiante de Platzi to: Teacher {} name

function logProperty(target, key){
    let _val = target[key]; //seria igual a persona[nombre] = Persona.name
    const getter = () => {
        console.log(`Get: ${key} => ${_val}`);
        return _val
    }
    const setter = (newValue) => {
        console.log(`Set: ${key} => ${newValue}`);
        _val = newValue;
    }

    //sobrescribimos las propiedades del objeto para aplicar esta nueva logica 
    const objectProperty = {
        //este get obtiene la funcionalidad de getter
        get: getter,
        set: setter,
    }
    //Se añade una propiedad al objeto
    Object.defineProperty(target, key, objectProperty )
}

class Persona {
    @logProperty
    public name: string;

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

const p: Persona = new Persona('Alejandro'); //Set: ${key} => ${newValue}
p.name = 'Platzi'; //Set: ${key} => ${newValue}
const nameFromClass = p.name; //Get: ${key} => ${_val}```

Recuerden el public

class Persona {
    **public** name: string;
}

Si estuvo bastante confusa la clase, además de que violó el encapsulamiento, eso no lo debería hacer.
Si el objetivo es no demorarse, entonces debería traer el ejemplo ya hecho, sería mejor que hacer malas prácticas de programación

Hasta el momento esta muy bueno el curso, creo por lo que vi que en vídeos siguientes aplicaremos todos los conceptos aprendidos en los anteriores vídeos.

En la linea 2 se utiliza la palabra reservada “this” para asignar el valor de key a la variable _val.

¿Seria lo mismo colocar let _val = key?
Es decir, omitir la palabra reservada this ó es indiferente?

Con una repasadita, se entendió el código

Object. defineProperty se podria reemplazar haciendo uso de Proxy y el Api de Reflection de ESNext

En el ejemplo de la función logProperty hay que cambiar la línea 2 de esta manera:

function logProperty(target: any, key: string | number) {
  let _val = target[key];
  const getter = () => {
    console.log(`Get: ${key} => ${_val}`);
  };

Al utilizar esta implementación en particular, cada que se lea o escriba esta propiedad, se van a sobre escribir su get y set?

¿Se puede aplicar un mismo Decorator a distintas propiedades ?

Ahora todo tiene sentido 🤩

Para entender un poco mas el código y sus salidas 😄

// target class Person
// Element "name"

function logProperty(target, key) {
  let _val = this[key]; // Juan
  const getter = () => {
    console.log(`Get: ${key} => ${_val}`); // Get: name => Juan
    return _val; // Juan
  };

  const setter = (newValue) => {
    console.log(`Set: ${key} => ${newValue}`); // Set: name => Platzi
    _val = newValue; // Platzi
  };

  const objectProperty = {
    get: getter,
    set: setter,
  };

  // Content the extend, Who extend, Object
  Object.defineProperty(target, key, objectProperty);
}

class Person {
  @logProperty
  public name: string;

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

const p: Person = new Person('Juan');

p.name = 'Platzi'; // Set: name => 'Platzi'
const name = p.name; // Get: name => 'Platzi'

los getters son para obtener un valor deseado.
los setters es para establecer un nuevo valor.

se entiende.

No entendi ni madres en estas clases de decoradores