TypeScript / property decorator

Bienvenidos sean a este post, hoy veremos otro de los decoradores.

En el post anterior vimos como son los decoradores de clases y en este post un resumen general sobre los decoradores. Este decorador posee tres argumentos, de los cuales dos son obligatorios y el restante es opcional. Analicemos el siguiente codigo:

function decorarProp(destino: any, nombre: string) {
        console.log("destino.constructor: " + destino.constructor);
        console.log("Nombre de propiedad: " + nombre);
}

class clase {
        @decorarProp
        id: number | undefined;
}

La funcion sera la decoradora y en esta recibiremos dos argumentos, el primero sera siempre any porque es para que podamos acceder a cualquier clase, en realidad a su constructor, y el segundo argumento es para obtener el nombre de la propiedad que decoramos. En el bloque mostraremos el constructor de la clase y el nombre de la propiedad.

El siguiente detalle es como aplicamos el decorador porque no ira fuera de la clase sino dentro de esta pero antes de la propiedad que decoramos. La forma de aplicarlo es igual a los que vimos en el decorador de clases. con el arroba y el nombre de la funcion. En este caso tenemos una propiedad con el tipo de dato number y undefined. Con esto comentado podemos pasar a compilar y ver su salida:

$ node decorar.js
destino.constructor: class clase {
}
Nombre de propiedad: id
$

Este es un codigo basico pero como se aplica en la vida real? Analicemos el siguiente codigo:

function minimo(limite: number) {
        return (dest: Object, key: string) => {
                let valor: string;
                const getter = () => {
                        return valor;
                };
                const setter = (nuevo: string) => {
                  if (nuevo.length < limite) {
                        valor = "Error: La pass debe ser mayor a " + limite;
                  } else {
                        valor = nuevo;
                  }
                };
                Object.defineProperty(dest, key, {
                        get: getter,
                        set: setter
                });
        }
}

class Usuario {
        user: string;

        @minimo(8)
        pass: string;

        constructor(u: string, p: string) {
                this.user = u;
                this.pass = p;
        }
}

let usuario1 = new Usuario("tinchicus", "clave");
console.log(usuario1);
console.log(usuario1.pass);
let usuario2 = new Usuario("mirandma", "clave12345");
console.log(usuario2);
console.log(usuario2.pass);

Este codigo es para establecer si la contraseña informada cumple con el minimo de caracteres solicitados. Para ello nuestra decoradora sera una fabrica asi podemos pasarle un valor distinto ajustandose a nuestra necesidad. Como es una fabrica esta devuelve la funcion que es la verdadera decoradora. En este caso usaremos dos argumetnos, el de la clase y la propiedad, para luego definir una nueva variable la cual sera la encargada de manejar el valor de la propiedad. Lo siguiente sera una nueva funcion que se encargara de devolver el valor en la propiedad. La siguiente funcion sera la encargada de establecer un nuevo valor para esta propiedad y en este caso recibira el nuevo valor. Dentro del bloque verificamos si la longitud del valor nuevo es menor al limite establecido al inicio le asignaremos un valor de error a esta propiedad en caso contrario le pasara el nuevo valor. Lo ultimo en esta funcion es la definicion de la propiedad decorada y para ello usamos a defineProperty donde primero le pasaremos el objeto donde esta la propiedad, despues la propiedad y por ultimo el valor que contendra, en este caso seran los metodos get y set donde a cada uno le asignaremos las funciones definidas anteriormente.

Lo siguiente sera la clase que usaremos, establecemos dos propiedades para el usuario y la contraseña, siendo el segundo donde aplicaremos el decorador. Despues tenemos un constructor donde recibiremos los valores y se los pasaremos a las propiedades. Por ultimo crearemos dos objetos de esta clase y en ambos casos mostraremos el objeto generado y la contraseña. Compilemos y veamos la salida:

$ node decorar.js
Usuario { user: 'tinchicus' }
Error: La pass debe ser mayor a 8
Usuario { user: 'mirandma' }
clave12345
$

Si observan en el primer caso nos notifica que hubo un error por no alcanzar el limite establecido y en el segundo caso nos mostro el valor de esta. Esta es una forma practica de verlo en un codigo mas similar a la vida real.

En resumen, hoy hemos visto decoradores de propiedades, que es, para que sirve, como se utiliza, y un ejemplo pracctico para ver mejor su conducta. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.