TypeScript / Decorators

Bienvenidos sean a este post, hoy les traigo un resumen de los decorators.

Ya sabemos que una clase puede ser considerado un molde desde el cual podemos crear objetos para poder utilizarlo. Las clases se componen de propiedades y metodos para que puedan ser usados en los objetos. Los decoradores nos permiten insertar codigo en la definicion de una clase antes de la creacion de una instancia, si debemos compararlo con otros lenguajes podemos decir que es similar a los atributos en C# o las anotaciones en Java.

Nuestro primer paso con los decoradores sera establecerlo, para ello debemos ir al archivo tsconfig.json y deben descomentar la siguiente linea:

"experimentalDecorators": true,

Como su campo lo indica todavia es experimental pero a partir de ahora podremos compilarlo.

Un decorador es una funcion que es llamado con un conjunto de parametros especificos, son automaticamente propagados por javascript y contiene informacion sobre la clases, propiedades y metodos a los cuales el decorador sera aplicado. Su aplicacion depende de la cantidad y tipos de parametros. Tomemos el siguiente ejemplo:

function decorador(constructor: Function) {
    console.log('decorador llamado');
}

@decorador
class claseDecorada {
        id: number = 0;
}

La funcion sera la decoradora, este posee un argumento denominado como constructor, a su vez sera una funcion, y cada vez que se lo invoque nos mostrara ese mensaje. Observen como aplicamos al decorador, para ello usamos a arroba seguido del nombre del decorador y antes de la clase que «decoramos», luego tenemos una clase simple con una propiedad. Si lo ejecutamos tendremos la siguiente salida:

$ node decorar.js
decorador llamado
$

Como dijimos al ser llamado el decorador nos mostrara ese mensaje, sin necesidad de crear una instancia, por esta razon tomaremos el codigo anterior y lo modificaremos de la siguiente manera:

function decorador(constructor: Function) {
    console.log('decorador llamado');
}

@decorador
class claseDecorada {
        id: number = 0;
}

let inst_1 = new claseDecorada();
let inst_2 = new claseDecorada();
console.log(inst_1.id);
console.log(JSON.stringify(inst_2));

En este creamos dos nuevas instancias de esta clase, donde despues mostraremos el valor de la propiedad de la primera instancia y en el segundo caso mostraremos la estructura de la segunda instancia. Compilemos y veamos como es su salida:

$ node decorar.js
decorador llamado
0
{"id":0}
$

Observen que a pesar de las dos llamadas a la clase para crear las dos instancias solo se mostro una vez el mensaje de la invocacion del decorador. Con esto podemos decir que los decoradores son invocados una sola vez.

Pero una opcion interesante que poseemos con los decoradores es la posibilidad de invocar mas de uno. Tomemos el codigo anterior y realicemos la siguiente modificacion:

function decorador(constructor: Function) {
    console.log('decorador llamado');
}
function segundoDecorador(constructor: Function) {
    console.log('segundo decorador llamado');
}

@decorador
@segundoDecorador
class claseDecorada {
        id: number = 0;
}

En este caso agregamos una segunda funcion que usaremos de decorador y esta se la aplicamos directamente a la clase en conjunto con la anterior. Compilemos y veamos la salida:

$ node decorar.js
segundo decorador llamado
decorador llamado
$

Volvio a suceder lo anterior donde al ser invocados nos muestra el mensaje correspondiente pero con una curiosidad, la forma de llamarlos es en sentido inverso donde iremos desde la mas proxima a la clase mas alejada.

Pero los decoradores no se aplican solamente a las clases sino que podemos aplicar los distintos elementos que la componen, veamos los tipos de decoradores que disponemos:

• Clase, estos se aplican a las definiciones de clases, las vistas hasta ahora
• Propiedad, estos se aplican a las propiedades de una clase
• Metodo, estos a los metodos de una clase
• Parametro, estos son para los parametros de los metodos en una clase

Tomemos el codigo que vinimos trabajando y realicemos las siguientes modificaciones:

function decorarClase(constructor: Function) {}
function decorarProp(target: any, propertyKey: string) {}
function decorarMet(target: any,
                methodName: string,
                descriptor?: PropertyDescriptor){}
function decorarParam(target: any,
                methodName: string,
                parameterIndex: number) {}

@decorarClase
class claseDecorada {
        @decorarProp
        id: number = 0;
        @decorarMet
        mostrar() {}
        setId(@decorarParam id: number) {}
}

Primero definiremos cuatro funciones que usaremos como decoradores. El primero es igual a los que vimos anteriormente, la segunda sera para las propiedades de la clase y pasamos dos parametros siendo el primero para aplicarlo a cualquera y el segundo para el identificador de la misma. La tercer funcion sera para los metodos donde volveremos a usar a target, la segunda sera para el nombre del metodo y la ultima para una descripcion pero esta es opcional. La ultima funcion es para los parametros de un metodo donde vuelve a utilizar los dos argumentos del anterior para lo mismo pero tenemos un tercero para el indice del parametro. El de clase se aplico como hasta ahora, luego en la propiedad le aplicamos el decorador de la misma manera que a la clase, lo mismo hacemos con el metodo (con sus respectivas funciones) y el de parametro va antes del parametro de este metodo. Con esto podemos decir que no solamente los decoradores se pueden ajustar a nuestras necesidades sino que siempre iran antes del elemento a decorar.

Ya vimos varias posibilidades de los decoradores pero en algunas ocasiones debemos definir uno con parametros y para poder lograr esto tendremos que aplicar una funcion fabrica de decoradores. Para crear una debemos envolver a la funcion misma en otra funcion. Analicemos el siguiente ejemplo:

function fabricaDecoradora(nombre: string) {
        return (constructor: Function) => {
                console.log('funcion decoradora llamada con: ' + nombre);
        }
}

@fabricaDecoradora("decorativa")
class claseDecorada {}

Primero tenemos la funcion de fabrica donde recibiremos un argumento. En el bloque devolveremos una funcion que sera un decorador de clases y al igual que en casos anteriores al ser invocado devolvera un mensaje informando el nombre que recibimos como argumento. Al momento de utilizar el decorador le pasamos el nombre de la funcion que usamos como fabrica y como argumento un nombre identificador para finalmente tener nuestra clase. Compilemos y veamos la salida:

$ node decorar.js
funcion decoradora llamada con: decorativa
$

Al igual que en nuestro primer caso nos devolvio un mensaje al momento de ser invocado pero ahora con la ventaja de poder crear otros decoradores en base a la «fabrica» que implementamos. Esto es solo un resumen muy superficial de que son los decoradores, en los proximos posts veremos unas aplicaciones mas practicas de estos.

En resumen, hoy hemos visto decorator, que es, para que sirve, como se utiliza y sus distintas posibilidades de implementacion, 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.