No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Tuples

3/22
Recursos

Las tuplas o tuples nos permiten crear un array fuertemente tipado especificando el tipo de dato de cada elemento, as铆 como una cantidad definida de elementos que podr谩 almacenar.

Las tuplas no vienen en el conjunto de tipos de datos por defecto de JavaScript

Tuplas en TypeScript

Las definimos indicando entre [] el tipo de dato que cada elemento tendr谩 en la tupla.

const user: [string, number] = ['nicobytes', 15];

Al definir el tipado de cada uno tambi茅n estamos definiendo la cantidad de valores que tendr谩 la tupla, por tanto, no podemos agregar m谩s elementos.

let user: [string, number];

user = ['nico']; // Error: la tupla debe almacenar 2 valores (un `string` y un `number`)
user = ['nico', true]; // Error: el segundo elemento de la tupla debe ser del tipo `number`
user = ['nico', 20]; // Correcto: el primer elemento es del tipo `string` y el segundo de tipo `number`

Desestructuraci贸n

Podemos aplicar desestructuraci贸n para asignar a ciertas variables respectivamente los valores dentro de una tupla.

const user: [string, number] = ['nicobytes', 15];
const [username, age] = user;
console.log(username); // nicobytes

Nota

Este tipo de desestructuraci贸n tambi茅n lo podemos ver en el hook useState de la librer铆a React.

Cu茅ntanos: 驴En qu茅 situaciones ver铆as 煤til aplicar las tuplas en tus proyectos?

Contribuci贸n creada por: Mart铆n 脕lvarez (Platzi Contributor) con los aportes de Irving Ju谩rez y Franco Daniel Carrara.

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥減arecidas鈥 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.

`let user: [string, number, boolean, Function?];user = ['pipe', 15, true]` `// DESTRUCTURACION` `const [username, age] = user;console.log(username)console.log(age)` `user.push((()=>{}))console.log(user)`
**Tuplas en TS** Para definir un arreglo mas estricto, es de la siguiente manera: ```js type User= [string, number]; let arrUser:User[] = [] arrUser.push(["carlos",2]) arrUser.push(["alberto",5]) arrUser.push(["laura",12]) arrUser.push(["andrea",3]) console.log(arrUser); ```

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