Datos compuestos en TypeScript (II). Listas y tuplas

Existen otras construcciones en TypeScript, que nos permiten agrupar datos, como con las matrices. Sin embargo, en estas construcciones hay una diferencia fundamental: los datos no tienen por qué ser todos del mismo tipo. Se trata de las listas y de las tuplas.

Estos arreglos nos permiten agrupar datos de distintos tipos. Esto convierte a cada uno de estos arreglos en un dato compuesto del tipo any, de una forma implícita, ya que un mismo arreglo puede tener datos numéricos y de cadena, por ejemplo.

Estos arreglos, además, sientan la base para la construcción de objetos, tema que trataremos más adelante en esta misma serie.

LAS LISTAS

Las listas son muy parecidas a las matrices, con la diferencia (aparte de la que acabamos de comentar), de que los índices pueden ser literales, es decir, no tienen que ser numéricos secuenciales. Observa el listado listas.ts:

Cuando transpilas a JavaScript, se te muestra un mensaje de advertencia respecto a lo que te comentaba sobre el hecho de que la lisrta es, implícitamente, de tipo any. El mensaje es similar al siguiente:

ts/listas.ts(16,42): error TS7017: Element implicitly has an 'any' type because type '{ peso: number; longitud: number; anchura: number; altura: number; color: string; }' has no index signature.

Sin embargo, la tanspilación se lleva a cabo correctamente. Cuando cargas el JS resultante en un documento HTML, en la consola del navegador ves el resultado, así:

LAS TUPLAS

Las tuplas suponen una especie de híbrido entre las matrices y las listas. Se trata de un arreglo que puede tener datos de varios tipos, pero en los que las claves son, una vez más, índices numéricos.

Para construir una tupla, se define, en primer lugar, la estructura, indicando, específicamente, el tipo de dato que será cada elemento. Luego se le asignan valores a los elementos. Imagina que queremos una tupla con datos de un país. En concreto, vamos a tener cuatro datos: el primero será el nombre del país, de tipo string; el segundo será el nombre de su capital, también de tipo string; el tercer dato será el número de habitantes, un dato de tipo number; por último, el idioma oficial del país, que también es string. Después, asignamos los datos. Observa el listado tuplas.ts:

Cuando transpilas, recibes una advertencia como la que ya hemos visto anteriormente, indicándote que la tupla, en conjunto, es implícitamente de tipo any. Por lo demás, se transpila sin problemas. Si luego cargas el JavaScript resultante en un HTML, en la consola del navegador verás lo siguiente:

TIPOS DE VARIOS DATOS

Vamos a aprovechar la coyuntura para introducir aquí un concepto interesante sobre la declaración de los tipos de datos. Son los datos multitipo. Imagina el ejemplo anterior, en el que la población es un número bastante grande, cuya legibilidad no es, en modo alguno, cómoda. Si vas a hacer algún cálculo con este valor, tiene que estar así, en formato numérico. Sin embargo, si sólo lo quieres para mostrarlo, es probable que 44.664.694 sea más legible que 44664694. En ese caso, la población también tendría que ser un string. Sin embargo, como queremos reservarnos la posibilidad de meter un número, por si necesitamos el valor, tenemos que decirle a TypeScript que ese dato en concreto puede ser de tipo string o number. Para ello, tenemos que redefinir la estructura de la tupla, así:

Observa que para el tercer dato hemos indicado dos posibles tipos, separados por un pipe (|). Ahora podríamos cambiar la asignación de los datos de la tupla, así:

Esto es perfectamente válido en TypeScript, y no solo para los datos de una tupla. A cualquier variable podemos asignarle múltiples tipos (incluso los tipos personalizados que vimos en este artículo). Mientras luego el dato responda a alguno de los tipos indicados, no habrá problemas.

CONCLUYENDO

En este artículo hemos conocido las listas y las tuplas. Los códigos para las pruebas te los puedes descargar en este enlace. En posteriores artículos hablaremos de conceptos que necesitamos para usar POO en TypeScript.

   

Deja un comentario