Los arreglos son colecciones de datos que se almacenan bajo un mismo nombre, identificando cada uno de los datos de modo individual mediante un índice. Vamos, para entendernos, las matrices de JavaScript de toda la vida.
En TypeScript, sin embargo, contemplamos varios tipos de arreglos: las matrices, y las tuplas, las listas y los objetos. Son conceptualmente muy similares, aunque matices y operativas que los diferencian.
En este artículo nos familiarizaremos con las matrices que son, sin duda, los arreglos básicos en cualquier estructura.
LAS MATRICES
Las matrices en TypeScript son colecciones de datos, todos ellos del mismo tipo, que se declaran indicando el tipo junto al nombre (tal como con las variables), siguiéndolo de un par de corchetes, para indicar que se trata de una matriz. Por ejemplo, vamos a crear una matriz con nombres de países europeos. El código se llama matrices.ts, y es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 |
let paises_europeos:string[] = [ "España", "Francia", "Italia", "Alemania", "Rumanía", "Reino Unido", "Polonia" ]; console.log (paises_europeos); |
Cuando efectuamos la transpilación, el JavaScript resultante es extremadamente parecido, como ves en matrices.js:
|
1 2 3 4 5 6 7 8 9 10 11 |
"use strict"; let paises_europeos = [ "España", "Francia", "Italia", "Alemania", "Rumanía", "Reino Unido", "Polonia" ]; console.log(paises_europeos); |
Si ahora cargamos este JavaScript en un documento HTML y vemos la consola del navegador, nos muestra correctamente la matriz creada:
|
1 2 3 4 5 6 7 8 9 |
Array(7) 0: "España" 1: "Francia" 2: "Italia" 3: "Alemania" 4: "Rumanía" 5: "Reino Unido" 6: "Polonia" length: 7__proto__: Array(0) |
A partir de aquí, podemos hacer con la matriz todo lo que podríamos hacer trabajando directamente con JavaScript (agregar elementos, eliminarlos, mostrar un elemento, etc). Mira el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
let paises_europeos:string[] = [ "España", "Francia", "Italia", "Alemania", "Rumanía", "Reino Unido", "Polonia" ]; console.log ("Matriz inicial:"); console.log (paises_europeos); paises_europeos.push("Holanda"); let quedan:number = paises_europeos.length; console.log ("Hemos agregado:", paises_europeos[paises_europeos.length - 1]); console.log ("Nos quedan", quedan, "paises"); console.log ("Matriz final:"); console.log (paises_europeos); |
Esto se transpila correctamente, y el resultado en la consola del navegador es el esperado:
|
1 2 3 4 5 6 |
Matriz inicial: (7) ["España", "Francia", "Italia", "Alemania", "Rumanía", "Reino Unido", "Polonia"] Hemos agregado: Holanda Nos quedan 8 paises Matriz final: (8) ["España", "Francia", "Italia", "Alemania", "Rumanía", "Reino Unido", "Polonia", "Holanda"] |
|
ATENCIÓN. Como hemos declarado la matriz como de tipo
el transpilador te lanzará un mensaje de aviso:
Como ya vimos en el artículo anterior, a pesar de esto se efectúa la transpilación, por lo que deberás estar muy atento a los mensajes del transpilador para detectar incongruencias de este tipo. |
ITERAR SOBRE MATRICES
En TypeScript tenemos dos modos de iterar sobre los elementos de una matriz. En realidad, no son iteraciones propias de TypeScript, sino de JavaScript. La primera es el construcción for...in, que ya estaba disponible en JavaScript 5. La segunda, la construcción for...of, es nativa de ES6. Aunque ambas son parecidas, y sirven para lo mismo, existen diferencias de uso. Veamos como funcionan:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
let paises_europeos:string[] = [ "España", "Francia", "Italia", "Alemania", "Rumanía", "Reino Unido", "Polonia" ]; console.log ("Matriz inicial:"); console.log (paises_europeos); paises_europeos.push("Holanda"); let quedan:number = paises_europeos.length; console.log ("Hemos agregado:", paises_europeos[paises_europeos.length - 1]); console.log ("Nos quedan", quedan, "paises"); console.log ("Matriz final:"); console.log (paises_europeos); // Iteramos con la construcción for...in, accediendo a cada elemento a través de su índice. // Observa que al índice i no lo declaramos como number // ya que, al ser el índice de for...in se asume implícitamente. for (let i in paises_europeos) { console.log ("El país con el indice", i, "es", paises_europeos[i]); } // iteramos con la construcción for...of, que accede al valor // de cada elemento directamente, sin usar el índice. for (let pais of paises_europeos) { console.log ("Estamos iterando sobre el pais", pais); } |
Transpila el código, y cárgalo en tu navegador en un documento HTML. Observa los resultados en la consola del navegador. En la primera construcción iterativa (for...in) se usa una variable numérica (i) que recorre los índices de la matriz. A través de este índice se accede al valor de cada elemento. Observa que el índice no lo declaramos específicamente como de tipo number. Esto se debe a que, al ser, precisamente, un índice en una construcción de este tipo, TypeScript ya lo asume, implícitamente, como de este tipo. De hecho, si intentas especificarlo el transpilador te dará un error.
La construcción for...of es similar, sólo que accede, directamente, al valor de cada elemento, si emplear el índice. En este caso declaramos una variable (pais) que actúa como elemento de control de la estructura, recibiendo, en cada iteración, el valor del elemento en curso. Como la matriz es de datos de tipo string, la variable pais también lo es, de forma implícita, de modo similar a lo que ocurre con el índice en la construcción anterior.
CONCLUYENDO
En este artículo nos hemos introducido en el uso de matrices en TypeScript. En el siguiente conoceremos otros tipos de arreglos. Los códigos de este artículo los tienes en este enlace.
