Cuando trabajamos con TypeScript, es fundamental entender cómo manejar tipos no primitivos para representar datos más complejos y estructurados. En particular, los arrays y las tuplas nos permiten asociar múltiples valores a una sola variable, algo que va más allá de los tipos primitivos como number o string que solo almacenan un único dato.
Los arrays, o vectores, son estructuras que nos resultarán familiares si venimos de JavaScript. Se representan con corchetes y contienen múltiples valores separados por comas. Por ejemplo, un array numérico podría ser [1, 2, 3, 4, 5], donde cada número ocupa una posición específica, empezando a contar desde cero. De manera similar, podemos tener un array de strings para representar los días de la semana: ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"]. Cada elemento se accede mediante su índice, por ejemplo, el primer elemento es el índice 0, el segundo el índice 1, y así sucesivamente.
En TypeScript, cuando declaramos un array, podemos y debemos especificar el tipo de los elementos que contendrá. Esto se hace indicando el tipo seguido de corchetes, como string[] para un array de strings. Esto limita el array a contener solo elementos de ese tipo, evitando errores como intentar insertar un número en un array de strings. Si no especificamos el tipo, TypeScript intentará inferirlo basándose en los elementos que le asignamos, y en casos donde hay varios tipos, creará un tipo unión, por ejemplo, string | number | boolean. También podemos usar any[] para permitir cualquier tipo, aunque esto pierde la ventaja del tipado estricto.
Acceder a los elementos del array se hace con corchetes y el índice deseado, por ejemplo, dias[0] para obtener el primer día.
Por otro lado, las tuplas son una especialización de los arrays que solo existen en TypeScript, no en JavaScript puro. Son arrays con una longitud fija y tipos específicos para cada posición. Esto es útil cuando queremos representar estructuras donde sabemos exactamente qué tipo de dato va en cada posición y cuántos elementos hay. Por ejemplo, si queremos representar un registro con nombre, edad, país y un booleano que indique si es usuario premium, podemos definir una tupla así:
let usuario: [string, number, string, boolean];
usuario = ["Danny", 26, "España", true];
Aquí, usuario debe tener exactamente cuatro elementos, en ese orden y con esos tipos. No podemos agregar más elementos ni cambiar el tipo de alguno sin que TypeScript nos marque un error.
Una mejora introducida en TypeScript 4.0 es la posibilidad de darle nombres a los elementos dentro de la tupla para mejorar la legibilidad y comprensión del código. Esto no cambia cómo se accede a los elementos (seguimos usando índices), pero sí ayuda a quien lea el código a entender qué representa cada posición. Por ejemplo:
let usuario: [nombre: string, edad: number, país: string, premium: boolean];
usuario = ["Danny", 26, "España", true];
Con esta sintaxis, queda claro que el primer elemento es el nombre, el segundo la edad, y así sucesivamente. Aunque internamente seguimos accediendo con índices, estos nombres funcionan como etiquetas descriptivas para el tipo.
En resumen, los arrays nos permiten manejar colecciones homogéneas de datos, mientras que las tuplas nos ofrecen una estructura fija y heterogénea, con tipos específicos para cada posición. Además, con la capacidad de nombrar los elementos de las tuplas, podemos hacer que nuestro código sea más claro y mantenible. Estas herramientas son esenciales para modelar datos complejos y garantizar la seguridad de tipos en nuestras aplicaciones TypeScript.