TypeScript / noImplicitThis

Bienvenidos sean a este post, hoy veremos una opcion de la configuracion.

Esta opcion es para verificar la correcta implementacion del this en nuestro codigo. Antes de pasar al ejemplo debemos realizar varias cosas. La primera es generar el archivo tsconfig.json, para ello deben usar el comando tsc –init, una vez generado ingresan al archivo y busquen la opcion strict para pasarla de true a false. Lo siguiente sera descomentar la siguiente linea:

"noImplicitThis": true,

Con todo esto realizado analicemos el siguiente codigo:

class clase {
        id: number = 1;
        mostrar() {
                let callback = function() {
                        console.log("this.id: " + this.id);
                }
                setTimeout(callback,1000);
        }
}

let objeto = new clase();
objeto.mostrar();

Aqui tendremos una clase con una propiedad y un metodo. En el caso de la propiedad le establecemos un valor y el metodo contiene una funcion llamada callback que mostrara el contenido del id del objeto que generemos a partir de este. Por ultimo en el metodo hacemos un llamado a setTimeout para que se ejecute la funcion anterior despues de 1 seg. Finalmente creamos un objeto de la clase anterior y llamamos al metodo. Compilemos y veamos como es su salida:

$ tsc
ejemploTS.ts:5:30 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

5    console.log("this.id: " + this.id);
                               ~~~~

  ejemploTS.ts:4:18
    4   let callback = function() {
                       ~~~~~~~~
    An outer value of 'this' is shadowed by this container.


Found 1 error in ejemploTS.ts:5

$

Como indica el error, el this tiene implicitamente un any porque no tiene una identificacion, esto es asi porque la funcion que usamos dentro del metodo esconde este dato. Por lo tanto no sabe realmente que posee this. Para solucionarlo tenemos dos opciones, la primera es tomar al metodo y modificarlo de la siguiente manera:

        mostrar() {
                let callback = function(_this) {
                        console.log("this.id: " + _this.id);
                }
                setTimeout(callback,1000, this);
        }

Primero debemos agregarle un argumento a la funcion callback y al setTimeout le agregamos un argumento, en este caso a this, para que se lo pase como argumento a la funcion que informamos. Con esto ahora tendra visualizacion con el this del objeto creado y no el interno del metodo. Si lo compilan notaran que el error desaparecio y funcionara. Hablemos de la segunda opcion y para ello debemos modificar a mostrar de la siguiente manera:

        mostrar() {
                let callback = () => {
                        console.log("this.id: " + this.id);
                }
                setTimeout(callback,1000);
        }

Este es un metodo mas simple donde en lugar de usar a function la hacemos con la flecha de funcion. Gracias a esta sintaxis, no necesitaremos pasar como argumento al this y es mas intuitivo que la otra opcion pero sepan que ambos codigos funcionan perfectamente, veamos como es su salida:

$ node dist/ejemploTS.js
this.id: 1
$

Esta opcion esta pensado para monitorear como se aplica el this. Esta pensado principalmente para evitar errores de ejecucion por falto de algun dato o simplemente que no podamos llegar al this que necesitamos, como vimos en el primer ejemplo, lo cual puede derivar en un problema como dijimos.

En resumen, hoy hemos vistto a noImplicitThis, que es, para que sirve, como se habilita, un ejemplo para ver la falla y dos formas de solucionarlo. 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.