Datos compuestos en TypeScript (IV). Más sobre objetos

En el artículo anterior aprendimos a manejar objetos de una forma eficaz, pero bastante simple. Los objetos son, como ya sabemos, estructuras de datos pero, combinando eso con lo que ya sabemos, y con un conocimiento cierto de ES6, podemos sacarle mucho más partido a los objetos en nuestra programación.

En este artículo vamos a crear un tipo personalizado de objeto. Después, crearemos una matriz de objetos de ese tipo. Por último, veremos como podemos iterar sobre esa matriz, empleando una construcción que, hasta ahora no hemos utilizado: la instucción forEach. No es específica de TypeScript, sino que fue implementada, como ya sabes, en ES6.

EL ESCENARIO

Vamos a usar un tipo personalizado de datos, para almacenar actores y actrices famos@s. Para cada uno almacenaremos su nombre artístico, su fecha de nacimiento, y una lista de cinco de sus películas más emblemáticas (le pondremos cinco a cada uno por poner algo, pero podríamos haberle puesto un arreglo con distintas cantidades de elementos).

Lo primero que hacemos es definir el tipo de dato que vamos a crear, así:

Esto no es nada nuevo. Ya aprendimos en un artículo anterior la forma de crear tipos de datos personalizados mediante la instrucción type.

A continuación creamos una matriz de objetos del tipo que hemos definido. Observarás que cada objeto mantiene, como debe de ser, la estructura del tipo actor (para eso la hemos definido como un tipo personalizado):

A continuación creamos una cadena que contiene una serie de instrucciones HTML, para crear una tabla, con sus cabeceras incluidas, y dejamos la tabla «abierta», para luego crear una fila por cada actor o actriz de la lista:

Ahora viene la parte que es de ES6. La estructura forEach recorre una matriz y recibe, como argumento, una función de callback que, a su vez, recibe cada uno de los elementos de la matriz. Como cada elemento es, a su vez, una estructura, podemos acceder a sus propiedades, incluyéndolas en una tabla HTML.

La gracia es cuando llegamos al elemento pelicula. Este es, a su vez, una matriz de strings. Por lo tanto, creamos otra construcción forEach anidada, lo que nos permite recorrer cada una de las películas del actor en curso, como vemos a continuación:

Para finalizar, simplemente cerramos la tabla y la mostramos en el documento.

Si transpilas el código y lo ejecutas en tu navegador, verás la tabla de datos completa, tal cómo queda.

CONCLUYENDO

En este artículo hemos visto un uso más avanzado de los objetos en TypeScript. Los códigos de ejemplo completos puedes descargarlos en este enlace. En el próximo artículo empezaremos a ver clases y POO empleando TS.

   

Deja un comentario