TypeScript / method decorator

Bienvenidos sean a este post, seguimos con los decoradores.

Ya hemos visto los decoradores de clases y propiedades, inclusive los de propiedades estaticas, y ahora veremos los decoradores de metodos. Estos poseen tres argumentos, el primero es la clase/objeto, el segundo sera el nombre del metodo y el tercero es para una descripccion, de los cuales los dos primeros son obligatorios y la tercera es opcional. Analicemos el siguiente ejemplo:

function decorarMet(dest: any,
                nombre: string,
                descrip?: PropertyDescriptor) {
        console.log('destino: ' + dest);
        console.log('nombre metodo: ' + nombre);
        console.log('descripcion: ' + descrip);
        console.log('dest[nombre]: ' + dest[nombre]);
}

class Clase {
        @decorarMet
        mostrar(salida: string) {
                console.log("clase.mostrar(llamado por ("
                                + salida + ")");
        }
}

La funcion decoradora como comentamos anteriormente va a tener tres argumentos, dos obligatorios y uno opcional, y luego mostraremos distintos valores. Entre los valores mostrados estan: a donde iremos a busccar el metodo, el nombre del metodo, la descripcion de este, y la definicion del metodo. Luego tenemos la clase donde esta el decorador y el metodo pertinente donde recibiremos un argumento y junto a un mensaje lo mostraremos. Compilemos y veamos la salida:

$ node decorar.js
destino: [object Object]
nombre metodo: mostrar
descripcion: [object Object]
dest[nombre]: mostrar(salida) {
        console.log("clase.mostrar(llamado por ("
            + salida + ")");
    }
$

Con esto tenemos un ejemplo muy basico de como aplicarlo y ver como trabaja pero necesitamos verlo en un ejemplo mas complejo para entenderlo del todo. Por esta razon, vamos a analizar el siguiente ejemplo:

function auditLog(dest: any,
                nombre: string,
                descrip: PropertyDescriptor){
        let funcionOriginal = dest[nombre];
        let funcionAudit = function(este: any) {
                console.log('1. auditLog: anulacion del llamado ' + nombre);
                for(let i = 0; i < arguments.length; i++) {
                  console.log('2.arg: [' + i + '] = ' + arguments[i]);
                }
                funcionOriginal.apply(este, arguments);
        }
        dest[nombre] = funcionAudit;
        return dest;
}

class clase {
        @auditLog
        mostrar(arg1: string, arg2: string) {
                console.log('3. Llamado a clase.mostrar('
                        + arg1 + ',' + arg2 + ')');
        }
}

let claseAudit = new clase();
claseAudit.mostrar('argumento_1','argumento_2');

Primero definimos la funcion decoradora y como es para un metodo le pasamos los tres argumentos. Lo primero que haremos es almacenar en una variable al metodo que decoramos. Lo siguiente sera definir una nueva funcion la cual recibe cualquier tipo de dato. En este mostraremos un mensaje y luego mediante un bucle mostraremos todos los argumentos pasados al metodo, para finalmente aplicar un llamado al metodo apply en la copia de la funcion original y le pasaremos el metodo y los argumentos. Para finalmente asignar el objeto creado en funcionAudit al metodo que decoramos. Por ultimo devolvemos al objeto dest.

Lo siguiente es crear una clase donde tenemos un metodo llamado mostrar y a esta le aplicaremos el decorador anterior. Y en esta finalmente mostraremos un mensaje con los dos argumentos. Lo ultimo es crear un objeto de esta clase y llamamos al metodo con dos valores. Compilemos y veamos la salida:

$ node decorar.js
1. auditLog: anulacion del llamado mostrar
2.arg: [0] = argumento_1
2.arg: [1] = argumento_2
3. Llamado a clase.mostrar(argumento_1,argumento_2)
$

Observen como de una manera «sencilla» logramos una auditoria para el llamado del metodo dentro de la clase, asi como esta y otras tareas podemos asignar mediante un decorador.

En resumen, hoy hemos visto al decorador de metodos, que es, para que sirve, como se utiliza, datos que podemos obtener, asi como un ejemplo practico mas parecido a algo en la vida real. 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.