TypeScript / strictBindCallApply

Bienvenidos sean a este post, hoy seguimos con las opciones de configuracion.

Javascript nos provee tres funciones para anular el valor de this en una funcion, estas son:

• bind
• call
• apply

Cuando las usamos, le estamos dando una version muy particular del objeto que la funcion debe usar como valor para this y luego invocar la funcion con los parametros requeridos. Esta opcion nos asegura que estos parametros son provistos con el tipo correcto. Antes de pasar al ejemplo debemos hacer unas preparaciones.

La primera es generar el archivo tsconfig.json mediante el comando tsc –int. Lo siguiente sera ir al archivo y pasar la opcion strict de true a false. Para luego descomentar la siguiente linea:

"strictBindCallApply": true,

Con esto realizado podemos pasar a trabajar con nuestro ejemplo, para ello generen un archivo y agreguen el siguiente codigo:

class clase {
        nombre: string = "valor predeterminado";
        mostrar(indice: number, desc: string) {
                console.log("this.nombre: " + this.nombre);
                console.log("indice: " + indice);
                console.log("descripcion: " + desc);
        }
}

let objeto = new clase();
objeto.mostrar(1, "es un ejemplo");

Esta es una clase simple con una propiedad que posee un valor. Lo siguiente es un metodo que recibe dos valores pero en el bloque muestra primero el valor de la propiedad de la clase y luego los valores recibidos. Por ultimo creamos un objeto de esta clase y luego llamamos al metodo. Compilemos y veamos como es su salida:

$ node dist/ejemploTS.js
this.nombre: valor predeterminado
indice: 1
descripcion: es un ejemplo
$

Debe compilar sin generar algun error y nos devuelve todos los datos enviados y el de la propiedad. Tomemos la ultima linea y modifiquemosla de la siguiente manera:

objeto.mostrar.call({nombre: "un override a la propiedad"},
                        1, "es un ejemplo");

Si recuerdan al comienzo que las tres funciones anulaban el valor de this para la funcion. Esto hara que tome el valor de this y lo reemplace con el pasado como parametro, el resto siguen trabajando de la misma forma. Si lo compilan veran la siguiente salida:

$ node dist/ejemploTS.js
this.nombre: un override a la propiedad
indice: 1
descripcion: es un ejemplo
$

Si bien funciono de esta manera, esta opcion toma como blanco primario a las tres funciones no quita que el compilador siga evaluando el resto de los argumentos. Por ejemplo si algun valor de los informados en el metodo fuera de distinto tipo devolvera el siguiente error al momento de compilarlo:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Continuemos viendo como trabajan las otras dos funciones, vamos a tomar nuevamente la ultima linea y la modificaremos de la siguiente manera:

objeto.mostrar.apply({nombre: "un override a la propiedad"},
                        [1, "es un ejemplo"]);

La funcion apply siempre pasa los datos como array, salvo para el dato que usamos para anular al this, y si lo compilan veran que funciona correctamente. Esta funcion siempre pasa para el resto de los argumentos del metodo y/o funcion esos datos como un array.

El siguiente es bind pero para este debemos hacer unas modificaciones mas, tomemos todo el codigo y realicemos las siguientes modificaciones:

class clase {
        nombre: string = "valor predeterminado";
        mostrar(indice: number, desc: string) {
                console.log("this.nombre: " + this.nombre);
                console.log("indice: " + indice);
                console.log("descripcion: " + desc);
        }
}

let objeto = new clase();
let unir = { nombre: "unimos esto" };

let mostrarExt = objeto.mostrar.bind(unir, 1, "es un ejemplo");

mostrarExt();

En la clase no realizamos ninguna modificacion, seguimos creando el mismo objeto pero luego si viene la primera modificacion. Esta consiste en crear un nuevo objeto que poseera la propiedad de la clase con otro valor. Lo siguiente es crear una variable que contendra el resultado de aplicar bind. Esta funcion es similar a las dos anteriores donde primero aplicara la modificacion al this de la funcion con el valor pasado, para este caso usamos el objeto anterior, y luego los valores para el metodo. Pero esta funcion siempre devuelve como resultado otra funcion y por esta razon debemos almacenarla dado que lo hara de forma permanente. Por ultimo simplemente llamamos a la nueva funcion. Si lo compilamos y ejecutamos veremos la siguiente salida:

$ node dist/ejemploTS.js
this.nombre: unimos esto
indice: 1
descripcion: es un ejemplo
$

A partir de este momento trabajara siempre con ese valor pero si deseamos modificarlo debemos establecer un nuevo valor a unir y volver a pasarlo a la funcion generada. Como pueden ver cada uno de los tres tienen sus ventajas y desventajas entre los mismos. Siendo cada uno mas practico para ciertos momentos de nuestro codigo. Tengan en cuenta que como mencionamos al inicio esta opcion solo verifica a estas tres funciones pero no quita que verifique tambien malas asignaciones de tipos.

En resumen, hoy hemos visto a strictBindCallApply, que es, para que sirve, como se utiliza, a las tres funciones involucradas y como se aplican. 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.