Datos compuestos en TypeScript (V). POO

La programación orientada a objetos se basa, como ya sabes, en una estructura de clases y objetos creados a partir de esas clases, así como en unas adecuadas prácticas de programación. En los artículos anteriores hemos aprendido a crear objetos en TypeScript como estructuras de datos articuladas a partir de tipos personalizados de datos. Como el tipo de un dato no trasciende a JavaScript (al menos todavía, con las versiones más actuales), en definitiva nos quedaban como conjuntos de datos agrupados, sin más.

JavaScript, a partir de la versión ES6, ya soporta una rudimentaria programación de clases y objetos. En este artículo vamos a ver que nos aporta al respecto TypeScript, y como debemos trabajar con la POO.

LA POO EN TypeScript

Vamos a centrarnos en este apartado en crear un ejemplo muy simple de una clase, e instanciar un objeto a partir de dicha clase, Sólo para ver como transpila a JS y la mecánica básica del uso de clases. El código, basado en el ejemplo del artículo anterior, aunque con menos datos, para simplificar, es actores.ts:

Como ves, la programación es extremadamente sencilla. De hecho, si estás familiarizado con todo lo relativo a POO (herencia, interfaces, instanciación, sobreescritura de métodos, encapsulación, etc.) que sepas que TODO lo que sabes al respecto te vale perfectamente en TypeScript. De hecho, a título de curiosidad, y sólo como muestra, en la línea 6 ves que hemos creado, por ejemplo, una variable de clase encapsulada (privada). Si no estás familiarizado con la POO, te sugiero que leas estos artículos.

Sólo hay algunos matices en los que debes reparar. En primer lugar, observa la línea 8. El constructor de una clase se declara con el nombre genérico constructor, y debe tener el modificador de acceso public (a la fuerza, claro). O no debe tener modificador de acceso, como en este ejemplo, ya que public es el acceso por defecto si no se especifica nada.

También quiero llamar tu atención respecto a la línea 21. Cuando nos referimos a una propiedad de clase, en lenguajes como PHP encadenamos el nombre de la clase y de la propiedad mediante el signo :: (que, en el mundillo de la programación tiene el pintoresco e impronunciable nombre de Paamayim Nekudotayim o, de una forma más familiar, operador de resolución de ámbito). Cuando usamos variables de objeto en TypeScript (y esto viene heredado de lenguajes totalmente orientados a objetos, como Java) se emplea el punto (.).

DEFINIR PROPIEDADES EN EL CONSTRUCTOR

Cuando creamos una clase estamos acostumbrados a declarar las propiedades que tendrán los objetos de dicha clase (con su ámbito de visibilidad público o privado, según el caso), y luego, si es necesario inicializarlas al crear el objeto, se le asignan valores en el constructor, así:

Esto permite que las variables nombre y anyo_nac estén disponibles en toda la clase. Es decir. Si, posteriormente tratamos de mostrarlas, o creamos algún método que las use de alguna manera, tendremos estas variables disponibles con los valores que se les han asignado en el constructor.

Existe otra manera de manejar las variables en el constructor, así:

Esto crea el objeto con los valores recibidos asignándolos, directamente, a las variables nombre y anyo_nac. Sin embargo, esto tiene un problema (en realidad, un problemón). Si examinas el código, te das cuenta en seguida. Las variables del objeto nombre y anyo_nac se crean en el constructor, y sólo viven en el ámbito del mismo. Por lo tanto, todo lo que quieras hacer con ellas hay que hacerlo en el constructor, en el momento de la creación del objeto. Una vez finalizado el ciclo de vida del constructor, las variables no están disponibles para usarlas en otros métodos, o hacer lo que sea con ellas.

La solución pasa por usar la misma sintaxis, pero precediendo las variables con un modificador de acceso. Por ejemplo, lo siguiente:

El modificador de acceso puede ser el que desees, pero debe estar. Incluso si las variables van a ser de visibilidad pública, que es el modificador de acceso por defecto y, por lo tanto, parece que no debería ser necesario, si usas esta sintaxis debes indicarlo específicamente. Declarando así las variables en el constructor, están disponibles en todo el resto de la clase, para cualesquiera otros métodos que hubiera.

Esta sintaxis es muy habitual, por lo que debes conocerla. Sobre todo, en entornos de desarrollo como Angular.

TRANSPILANDO

La transpilación de un TypeScript a JavaScript puede ser diferente, según tengamos nuestro transpilador configurado para obtener JavaScript 5 o ES6. Esto es algo de lo que ya hablamos en este artículo. Salvo que tu código sea ridículamente simple, notarás diferencias en el resultado final. Sin embargo, estás son especialmente relevantes cuando empleas clases y objetos. Observa como transpila el código anterior a ES6:

Como ves, dejando aparte el tema del tipado de datos, el resultado es claro, legible y muy similar al original en TS. Ahora, sin embargo, retrocedamos un poco en el tiempo (hasta JavaScript 5), y veamos lo que ocurre:

A ver. Funcionar, lo que se dice funcionar, sí, vale. Funciona. Pero nadie puede negar que es tosco y que, desde luego, es cualquier cosa menos programación orientada a objetos. Es ilegible, inmantenible… y eso sólo porque el código original era extremadamente simple. Imagina ahora un código con clases con veinte propiedades y diez métodos, que use herencia y alguna interface, por ejemplo. Te he mostrado esto para que entiendas la importancia de transpilar a JavaScript 2015 siempre que te sea posible. Sí, de acuerdo Si tienes que hacer mantenimiento sobre el código, siempre trabajarás sobre el TypeScript original, nunca sobre la transpilación, lo que, evidentemente, hace que, como desarrollador, esto no te afecta. Sin embargo, si alguien, en algún momento, tiene que tocar el JavaScript… bueno, que no le pase nada.

CONCLUYENDO

En este artículo nos hemos introducido en la POO en TypeScript. Como ya te he comentado, todo lo que ya sabes al respecto te vale en TypeScript, aplicando, eso sí, las construcciones y sintaxis propias de este lenguaje, que hemos aprendido en los artículos anteriores de esta serie. Aún hay algunas cosas que nos quedan por aprender respecto a TypeScript. Sin embargo, son conceptos que entenderemos mejor en su contexto, por lo que hablaremos de ellos en artículos en los que empleemos TS como herramienta, en lugar de centrarnos en el desarrollo en TS en sí mismo. Los códigos de este artículo los tienes, como siempre, en este enlace.

   

Deja un comentario