Saltar al contenido

ARRAYS en TypeScript | APRENDE a usarlas con estos SENCILLOS puntos

11 marzo, 2021

¡Eyyyy hola que tal dev! Muy buenas. [email protected] al canal, Aitor otra vez por aquí. Y hoy vamos a continuar en la sección de TypeScript.

TypeScripts Arrays

Si alguna vez te has preguntado ¿cómo se usarán los arrays/arreglos en TypeScript? o mejor dicho aún ¿Cuál será su sintaxis? Si la respuesta es sí, tranquilo, a todos nos ha pasado y sobre todo cuando empezamos con el lenguaje, o a programar en sí mismo.

Cómo sabrás, mi nombre es Aitor y soy desarrollador de desde hace muchos años ya. Y en el video de hoy te voy a enseñar cómo puedes usar estos arrays/arreglos de una forma sencilla y eficaz.

Pero antes de continuar, déjame decirte que he grabado en video este artículo para algunos de mis lectores que les gusta más leer que escribir. Lógicamente soy yo el que aparece en el video y me gustaría, que si el video te ha ayudado/gustado pues que te suscribas al canal desde aquí 😊

 

 

Información previa

Bueno, cómo es posible que ya conozcas lo que es un array, en ese caso te pediré que pases al siguiente punto. De lo contrario debes de leer este antes de continuar.

Un array, resumiendo, es una variable que almacena un conjunto/colección de otras variables. Aún no he hablado de ello en el diccionario del programador, así que en cuanto tenga el video hecho lo pondré por aquí.

 

Cómo se define un array en TypeScript

Para definir un Array en TypeScript, lo único que tenemos que hacer es usar los corchetes [] al final de la definición del tipo de variable que va a contener:

let heroes: string[];

 

Cómo hemos visto en el ejemplo del video, vamos a usar un array de algunos héroes de Marvel antes de continuar.

let heroes: string[] = [
    "Iron Man",
    "Spiderman",
    "Thor",
    "Hulk",
    "Black Widow",
    "Hawk Eye"
];

 

Cómo puedes intuir, dentro de esta arrays podemos almacenar colecciones de cualquier tipo de dato ya sea primitivo o por referencia. En el mismo ejemplo, hemos usado cadenas de texto. Ahora hagamos una de primitivos:

let numbers: number[] = [1,2,3,4,5];

 

Cómo se accede a los objetos de un array

Cuando nosotros vamos poniendo items dentro de un arreglo el mismo sistema va asignando un índice a cada uno de ellos. Dicho índice se incrementa con cada uno más que agregamos, y disminuye con cada uno que quitamos (esto lo vamos a ver a continuación).

Para acceder a un elemento en concreto, debemos de conocer su índice dentro de dicha colección. Para acceder a él lo haremos de la siguiente manera:

let segundoHeroe: string = heroes[2]; //Donde dos es el índice del array al que queremos acceder.

 

Para más ejemplo, vamos a acceder a uno de estos índices y lo vamos a mostrar por la consola de desarrollo:

console.log(heroes[2]); //Imprimiría Spìderman
console.log(segundoHeroe); //Este también imprimiría Spiderman

 

 

¿Se puede modificar su contenido?

Al tratarse de variables contenido dentro de una variable más grande, por supuesto que se puede modificar. Para ello solo tendríamos que hacer lo siguiente:

//Esto modificará su contenido.
heroes[2] = "Peter Parker";
console.log(heroes[2]); //Ahora imprimirá Peter Parker

 

Es muy sencillito. Cabe decir que, si es un array que almacena strings no podemos meter un number dentro. Vamos, que no podemos cambiar el tipo de dato, pero si el valor de este.

 

Cómo agregar y eliminar elementos

Llegando al final, esta seguramente sea la pregunta que más se pase por tu cabeza. Lo se por que a mí me pasó. ¿Puedo agregar elementos a un array después de haberla definido? Pues claro, faltaría más.

Para tal fin, vamos a hacer uso de dos funciones de las que disponen las variables de tipo array. Es posible que aún no sepas lo que son las funciones, pro que aún no lo he explicado en el diccionario del programado, pero fíate de mí que se hace así. Más adelante veremos lo que son.

//Agregamos un elemento al final del array:
heroes.push("Scarlet Witch");

//Eliminamos el último elemento del array:
heroes.pop();

 

Cómo has podido ver en el ejemplo, usamos las funciones “pop” y “push”:

  • pop -> Nos permite eliminar el último elemento que hay en el array.
  • push -> Nos permite agregar un elemento al final del array.

Hay más métodos para agregar y quitar elementos, pero de momento nos vamos a quedar con estos dos nada más, que son los principales que tienes que conocer cuando trabajas con arrays.

 

Conocer la longitud de un array en TypeScript

Para terminar, vamos a ver cómo podemos conocer la cantidad de elementos que tenemos dentro del array. Esto es muy útil cuando, por ejemplo, vamos a recorrerla con un bucle para, por ejemplo, imprimir en consola el nombre de los héroes que hemos visto en el video.

console.log(heroes.lenght);

 

Aunque es posible que no entiendas el código, o quizás sí, lo que me importa de lo que has visto es la llamada a la propiedad “lenght”. Esta propiedad es la que va a contener dicho número que tiene el valor de la cantidad de objetos que hay dentro del array.

Nota: Es importante saber que, dependiendo del lenguaje, dicha propiedad “lenght” también podría ser una función. O, más diferente aún, podría llamarse “size”.

 

Info adicional

Pues cómo en todos los artículos que hago en el blog, espero haberte ayudado a solucionar tu problema. O, por lo menos, haberte entretenido un poco para evadirte.

Si ha sido así, me gustaría que te suscribieras al canal, es importante para mí para saber si el contenido ha conseguido su objetivo. Y es importante para ti por que así no te perderás ninguno de los contenidos que voy subiendo que te pueden ser de utilidad.

Aunque si no te gusta YT, también puedes suscribirte a El Circulo. En resumen, es una comunidad que estoy montando alrededor del desarrollo de apps en la que te enseñaré a hacerte un sueldo mediante la programación móvil.

Sin nada más que agregar, me despido ya. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.