No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Decorators: aplicaci贸n en propiedades

12/28
Recursos

Aportes 27

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥淓mpezando鈥 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 鈥渕谩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 鈥渢his鈥 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(鈥楢lan鈥);
p.name = 鈥楶latzi鈥; // Set: name => 'Platzi鈥
const myName = p.name; // Get: name => 鈥楶latzi鈥

// 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

Excelente, excelente
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 鈥渢his鈥 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