Introducción a los arrays en TypeScript

Última actualización: 01 - 11 - 2023

¿Qué es un array en TypeScript?

Un array es una colección de elementos que comparten algo en común, estos datos pueden ser de cualquier tipo pero TypeScript es capaz de restringir el tipo de dato que puede tener un array. ¿Cómo es esto? 🤔 A diferencia de JavaScript, en TypeScript se pueden almacenar un solo tipo de dato en un arreglo si se crea un arreglo de forma explícita; de forma inferida puede aceptar cualquier tipo de dato. Si no tienes claro cómo es la creación / declaración de variables en TypeScript de forma explícita e inferida chequea este post: Creación de variables de forma inferida y explícita en TypeScript.

¿Cómo crear un array en TypeScript?

Creando un array de forma inferida en TypeScript

Esta forma de crear un array es exactamente igual a como se crea un array en JavaScript

// 1) Se declara la variable del arreglo
// 2) Elige el nombre apropiado para la variable
// 3) Utiliza el operador de asignación =
// 4) Abre y cierra con llaves cuadradas [] los datos dentro del arreglo
// 5) Cierra con ;

let datos = ["Tu colección de datos dentro del array"];

Veamos unos ejemplos para ver qué es lo que sucede con esta forma de crear arrays.

let datos_numericos = [0,1,2,3,4];
let datos_string = ["a","b","c","d","e"];
let cualquier_vaina = [37,"Chuck Norris",true,"https://media.giphy.com/media/9xttCtcnZIwNZUPs24/giphy.gif"];

Los poderes de TypeScript en cierta forma van a descubrir el tipo de dato de estos tres arreglos. En el primer ejemplo datos_numericos el lenguaje va a identificarlo como del tipo number; en el segundo ejemplo datos_string lo identificará como tipo string y el último ejemplo de cualquier_vaina lo puede identificar como del tipo any o inferir los tres tipos de datos que posee.

let datos_numericos = [0,1,2,3,4];// number[]
let datos_string = ["a","b","c","d","e"];// string[]
let cualquier_vaina = [37,"Chuck Norris",true,"https://media.giphy.com/media/9xttCtcnZIwNZUPs24/giphy.gif"];// any[] || (string | number | boolean)[]

Nota: Pueden pasar el mouse sobre el nombre de la variable en su editor de texto para ver qué tipo de dato está infiriendo TypeScript. 👆🏻

Esto podría llevarnos a la siguiente pregunta: ¿Cuántos tipos de array existen en TypeScript?

En sí, no es que existan diferentes tipos de arrays si no diferentes formas de crearlos y para ello debemos conocer la forma explícita.

Creando un array de forma explícita en TypeScript

Podemos ser muy específicos al momento de crear un array, nos puede dar ventaja para la manipulación de datos en un futuro ya que solo estaremos manejando un mismo tipado.

Para crear un array de forma explícita seguiremos los siguientes pasos:

  1. Se declara la variable del arreglo con el nombre apropiado
  2. Se utiliza el signo de dos puntos ( : ) para definir el tipo de dato
  3. Se elige el tipo de dato que va a contener el array
  4. Al ser un array se definen los corchetes cuadrados [] después del tipo de dato
  5. Se asignan los datos dentro del array

Array de strings en TypeScript

const array_de_strings:string[] = ["a","b","c","d","e"];

Array de números en TypeScript

const array_de_numeros:number[] = [0,1,2,3,4];

Array de (any) cualquier tipo de dato en TypeScript

const array_de_any:any[] = [0,"un string",false,!0];

Aunque el tipo any puede ser usado podemos ser estrictos y específicos para estos arrays que contienen diferentes tipos de datos.

const array_de_cualquier_vaina:(number|string|boolean)[] = [0,"un string",false,!0];

Array de objetos en TypeScript

Para los objetos tenemos que hacer un punto y aparte ya que involucran otros temas como modelos o interfaces y aserción de tipos (Que veremos en artículos posteriores), pero no nos compliquemos mucho y exploremos lo básico.

Al igual que los otros tipos de datos, podemos crear un array de objetos de forma inferida y de forma explícita. Veamos sus diferencias. 👀

// Forma explícita

const array_de_objetos1:object[] = [
  {
    propiedad1:"Un valor random",
    propiedad2:"Otro valor random",
  },
  {
    propiedad1:"Un valor random 2",
    propiedad2:"Otro valor random 2",
  },
  {
    propiedad1:"Un valor random 3",
    propiedad2:"Otro valor random 3",
  },
];
// Forma inferida

const array_de_objetos2 = [
  {
    propiedad1:"Un valor random",
    propiedad2:"Otro valor random",
  },
  {
    propiedad1:"Un valor random 2",
    propiedad2:"Otro valor random 2",
  },
  {
    propiedad1:"Un valor random 3",
    propiedad2:"Otro valor random 3",
  },
];

En ambos casos se pueden usar métodos para los arreglos pero solo en el ejemplo de la forma inferida se pueden acceder a las propiedades del objeto.

Si estás leyendo esta sección del blog es porque conoces un poco sobre JavaScript, y te tengo buenas noticias, los métodos para los arrays en TypeScript funcionan de la misma manera que en JavaScript. Dale una ojeada a este artículo: Manejo de arrays en JavaScript. Luego veremos el comportamiento del tipado cuando se manipulen los arrays con TypeScript. 🧐

Volver