Como utilizar el «this» de JavaScript en TypeScript

En artículos anteriores has visto cómo utilizar TypeScript dentro de los desarrollos y el motivo por el que lo utilizamos. Te he hablado de las ventajas y, sin embargo, hay algunos aspectos que son de mucha utilidad cuando se desarrolla en JavaScript. Por ejemplo, el uso del parámetro «this» en JavaScript y como poder utilizarlo dentro de TypeScript.

El this en JavaScript

El «this» es uno de los términos que más chocan a los desarrolladores cuando dan sus primeros pasos con JavaScript. El motivo es que su funcionamiento no es el mismo que en otros lenguajes orientados a objetos.

Cuando estamos en C#, encontramos que los métodos de la clase siempre disponen de la variable this, que nos permite acceder a nuestra propia instancia sobre la que se está ejecutando el método. Es decir, si tienes la clase:

   class Person
    {
        public string Name { get; set; }
        public  string LastName { get; set; }
        string FullName()
        {
            return string.Concat(this.Name, "->", this.LastName);
        }
    }

Verás que en FullName siempre tendrás this apuntando a una variable del tipo Person, que contendrá dos campos Name y LastName. En Javascript esto no es así.

En Javascript todo son objetos, incluidas las funciones y métodos. Ambos son instancias de Function y, como tales, no están ligadas a un objeto en particular. Mira el código:

function fullName() {
  console.log(this.name, "->",this.lastName);
}

var objectA = {
  name: "Alice",
  lastName:"Kiss",
  myMethod: fullName
};

var objectB = {
  name: "Bob",
  lastName:"Marley",
   myMethod: fullName
};

En este ejemplo, hay dos objetos totalmente independientes y ambos tienen la propiedad myMethod apuntado a fullName, a pesar de que no tienen una clase en común más que Object. Entonces, ¿cuál es el valor de this en fullName? No es fijo, cambia en función de la denominación.

Esto te proporciona, para hacer manejos sobre el DOM, mucha verticalidad. Por ejemplo, para recorrer los hijos de un determinado modo, tienes una lista y quieres asociar cada elemento de la lista a un evento click. Tienes este html:

<ul class="lista">

<li>Uno</li>


<li>Dos</li>


<li>Tres</li>

</ul>

Y con la siguiente instrucción en JavaScript, puedes cambiar el estilo a azul.

$(document).ready(function () {
    $(".lista").hover(function () {
        $(this).click(function () {
            alert(this.className);
        });
    });
});

Si ejecutas este código, cada vez que pulses sobre un elemento de la lista, se mostrará un único mensaje con el nombre de la clase.

Ahora bien, en TypeScript… ¿Cómo se comporta this?

Como te  he contado en otros artículos, TypeScript es un subconjunto de JavaScript. Es decir, toda la sintaxis de JavaScript se puede utilizar en TypeScript. Pero… ¿Y el This?

En TypeScript el uso del this es exactamente igual que en C#. El uso del this hace referencia a la instancia del objeto, pero si pones el código de arriba en TypeScript… ¿Cómo se comportará?

Como habrás deducido, el comportamiento no es el esperad. Ahora cada vez que pulses sobre algún elemento de la lista, se muestran tres mensajes por pantalla. Esto es debido a que el comporamiento this no es tal y como estabas esperando.

Ahora bien, ¿cómo puedes solucionarlo? Para solucionarlo lo que tienes que hacer es capturar los argumentos de entrada en la función del evento Hover y, dentro de dichos argumentos, estarán las propiedades en las que tendrás el valor sobre el que vas a optar el evento click. En este caso, quedaría de la siguiente forma:

$(document).ready(function () {
    $(".lista").hover(function (event) {
        $(event.target).click(function () {
            alert(this.className);
        });
    });
});

Conclusión

Cuando desarrolles en un lenguaje, debes hacer uso de sus capacidades y no pensar como lo harías en otros lenguajes. Esta regla la aplico casi siempre que me pongo a aprender cualquier tipo lenguaje.

Cuando desarrollo en JavaScript, una mala practica es pensar cómo se hace ese desarrollo en otro lenguaje de programación. Hacerlo en TypeScript pensando como se haría determinado caso en JavaScript, ¡tampoco es la mejor opción!

Conocer JavaScript es una ventaja cuando desarrolles en TypeScript, pero debes de bien cada lenguaje y alguna «curiosidad» que deberás solventar 😉