Datos compuestos en TypeScript (I). Matrices

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:

Cuando efectuamos la transpilación, el JavaScript resultante es extremadamente parecido, como ves en matrices.js:

Si ahora cargamos este JavaScript en un documento HTML y vemos la consola del navegador, nos muestra correctamente la matriz creada:

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:

Esto se transpila correctamente, y el resultado en la consola del navegador es el esperado:

ATENCIÓN. Como hemos declarado la matriz como de tipo string, si le añadimos elementos, estos deberán de ser cadenas literales, es decir, datos del tipo que hemos declarado para la matriz. Si, por ejemplo, tratas de hacer lo siguiente:

paises_europeos.push(7);

el transpilador te lanzará un mensaje de aviso:

ts/matrices.ts(14,22): error TS2345: Argument of type '7' is not assignable to parameter of type 'string'.

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:

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.

   

Deja un comentario