Tuples

Tuplas en TS

Las tuplas nos sirven para hacer un array fuertemente tipado especificando el tipo de dato de cada elemento del array así como la cantidad de elementos. Para hacer una tupla lo hacemos de la siguiente manera

const user: [string, number, boolean] = ["Irving", 20, true]

Hay algo que se debe tomar en cuenta, que al mutar un array con una tupla como tipo, se puede utilizar un método push, y esto es permitido siempre y cuando el valor sea de un tipo declarado en la tupla, pero si permite más valores

let user: [string, number] = ['alan', 31];
user.push(true); // esto devuelve error
user.push(123456); // esto es permitido
user.push('alan'); // esto también es permitido

También podemos acceder a la posición de la tupla como si fuera un array:

let user: [string, number] = ['mike', 23] //* Esto es una tupla, solamente puede tener esos 2 argumentos en ese orden

console.log(user[0]) //* 'mike
console.log(user[1]) //* 23

const [username, age] = user //* Destructuración de una tupla
console.log(username) //* 'mike'
console.log(age) //* 23

Ejemplo de types como tuplas

podemos ver como creamos un type como tupla y en este mencionamos que su ultimo elemento es opcional y adicional a eso lo utilizamos, haciendo de la variable staff un array de tuplas.

type StaffAccount = [number, string, string, string?];

const staff: StaffAccount[] = [
  [0, "Adankwo", "adankwo.e@"],
  [1, "Kanokwan", "kanokwan.s@"],
  [2, "Aneurin", "aneurin.s@", "Supervisor"],
];

No confundir las tuplas de Typescript con las de JavaScript ( que esta en stage 2)
entre varias características que las diferencian están la inmutabilidad y posibilidad de comparación que tienen las tuplas de JavaScript en cambio las tuplas de Typescript están mas enfocadas en el tipado.

Siempre me habia preguntado que tipo de dato era useState y como funcionaba , ahora lo tengo mas claro

TUPLAS!!?? ACASO ESTO ES PYTHON? 😮

//Just two strings
  let users: [string, string];
  users = ["victor", "andres"];

  console.log(users);

  //Just one boolean, one string and one number
  let newTuple: [boolean, string, number] = [true, "variable", 3];

  console.log(newTuple);

  //Destructuring a tuple

  const [first, second, third] = newTuple;

  console.log(first);
  console.log(second);
  console.log(third);
  
  //Tuple with optional properties
  let newTuple2: [boolean, string, number?] = [true, "variable"]; //Number is optional

  console.log(newTuple2);

  //Tuple without limit
  const args: [boolean, ...number[], string] = [true, 2, 3, 4, 5, 6, "seven"]

  console.log(args)

Tuplas

Las tuplas usualmente podemos tender a decir que son iguales a los tipos types si bien son “parecidas” no son iguales.

Ya que al definir un tipo, estamos definiendo los tipos que recibe esa variable, y al definir una tupla estamos definiendo el tipo que recibe un array justamente en la posición que lo estamos definiendo

//Ejemplo al escribir un tipo
const array1: (string | number)[] = [1, 2, 3, 'uno', 'dos', 'tres']

//Ejemplo al definir una tupla
const array2: [string, number] = [1, 'dos']
// aqui nos daría error ya que al definir la tupla en array dos le indicamos que
// el primer elemento es un string, y el segundo es un number.
const array3: [number, number, number, string, string, string] = [1, 2, 3, 'uno', 'dos', 'tres']
// Ahora si estaríamos definiendo bien la tupla, ya que le indicamos que en cada espacio del array, va a recibir un dato en particular

Destructuring de tuplas

Las tuplas también se pueden destructurar, al igual como estamos definiendo el tipo de dato que va a tener ese array en ese espacio, podemos destructurarla por ejemplo

// creamos el tipo
type User = string | number, boolean
// creamos la variable, le asignamos el tipo y agregamos los datos del array
const user:User = ['jose', 12, true]
// destructuramos una tupla
const [userName, age] = user
console.log(userName, '<-- datos del userName')
console.log(age, '<--- datos de la edad')

Error curioso 🤔

Al querer usar name para desestructurar me sale el siguiente error y solo he usado name en esa línea de código.

En TypeScript, cuando se define una tupla como la que se ha mostrado:

let users: [string, number, boolean] = ['nico', 123, true];

Se Puede realizar un push a la tupla sin obtener un error en tiempo de compilación, porque TypeScript trata a las tuplas como arrays con una estructura fija y un número fijo de elementos, pero no realiza verificaciones de tipo en tiempo de ejecución para operaciones como push. Sin embargo, esta es una característica de TypeScript que puede llevar a resultados inesperados y errores en tiempo de ejecución si no se maneja correctamente.

Ejemplo: puedes hacer lo siguiente sin obtener errores en TypeScript:

users.push('otro string', 456, false);

Esto agregará elementos adicionales a la tupla users, pero debes tener en cuenta que TypeScript no te advertirá sobre este tipo de operaciones y que podrían causar problemas si esperabas que la tupla tuviera una estructura fija.

Si deseas mantener la estructura de la tupla y evitar que se realicen modificaciones en tiempo de ejecución, puedes utilizar TypeScript 4.0 y versiones posteriores, que introducen las tuplas de longitud fija, lo que permite definir tuplas que no se pueden modificar después de la inicialización. Puedes hacerlo de la siguiente manera:

let users: readonly [string, number, boolean] = ['nico', 123, true];

Usando readonly en la definición de la tupla, TypeScript te dará un error en tiempo de compilación si intentas realizar una operación como push que modificaría la tupla.

Desestructuración

Desestructuración

Tupla

Tupla

En TypeScript, una tupla es un tipo de dato que permite almacenar un arreglo fijo de elementos con tipos definidos. A diferencia de los arreglos normales, las tuplas tienen una longitud fija y cada elemento puede tener un tipo diferente.

let miTupla: [number, string, boolean] = [10, "Hola", true];

Fuente: CHATGPT