Tuples

Clase 4 de 22 • Curso de TypeScript: Tipos Avanzados y Funciones

Contenido del curso

Introducción

New Types

Funciones

Interfaces

Proyecto

Próximos pasos

22
Toma el Curso de Programación Orientada a Objetos con TypeScript
00:45 min

Tomar examen

Resumen

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.

Comentarios

Irving Juárez

student•

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]

Alan Jackson Duarte Marroquin

student•

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

Víctor Andrés Córdova Poma

student•

Es posible alterar la tupla de ese modo, pero no tiene sentido. Debido a que no podrás acceder a las variables que se colocaron, ya que Ts lanzará un error.

Error: Tuple type '[string, number]' of length '2' has no element at index '2'.

Ese es el tipo de error que se obtendrá al querer agregar una variable, porque se ha indicado que la tupla solo podrá contener dos variables dentro de sí.

Sin embargo, si quieres poder tener una tupla que no tenga un límite con respecto a la cantidad de variables que posea, como un array. Pero con la ventaja de que se le indica que tipo de variables es permitido y en que orden, pues puedes hacer esto.

type StringNumberBooleans = [string, number, ...boolean[]];
type StringBooleansNumber = [string, ...boolean[], number];
type BooleansStringNumber = [...boolean[], string, number];

El ejemplo lo saqué de la documentación.

Franco Daniel Carrara

student•

Especificamos que tenga dos variables solamente, pero sigue siendo mutable (A diferencia del proposal para JS), por lo que es posible hacerle un push y seguimos teniendo la posibilidad de acceder al valor, no mediante corchetes, ya que da error al tomar el length que esta fijado en 2, pero si con el .at(-1).

let user:[string,number] = ['Franco', 25];
console.log(user)

user.push('Hola');
console.log(user)
//console.log(user[2]) ESTO DA ERROR
console.log(user.at(-1)) // 'Hola'

Tener una tupla no nos asegura no pushear valores ni que no nos vayamos a mostrar los nuevos valores que pusheamos:

let user:[string,number] = ['Franco', 25];
user.push('Hola');
user.map(item => console.log(item))

//Franco
//25
//Hola

Miguel Angel Reyes Moreno

student•

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

Fernando Cabana Urtiaga

student•

Hola @nico!, como estas? Algo no me quedo claro acerca de las tuples, considerando que una tuple es un array, entonces los methods son los mismos, por lo tanto utilice el method push para hacer lo siguiente:

// Tuples 
let user: [string, number, string];
user = ['fer', 13, ''];
user.push('true');
user.push(1);
user.push(3);

Como output, obtengo lo siguiente:

age [ 'fer', 13, '', 'true', 1, 3 ]

Por que me esta agregando esos items al final de la tupla si este deberia estar limitado a 3?

Nicolas Molina

teacher•

Wow, es una excelente pregunta y que gran curiosidad y la respuesta es si TypeScript al parecer aún no ha restringido de una manera óptima las tuplas y no tiene en cuenta el forzar le uso adecuado del método push de un array, lo más óptimo para este caso ese evitar este tipo de mutaciones con los métodos, push, pop, splice etc:

Una solución puede ser que la tupla tenga la propiedad readonly o usar los índices directamente, así:

Andrés Gama

student•

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.

Cristian Mauricio Cavanzo Arias

student•

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

Víctor Andrés Córdova Poma

student•

//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)

Jose Antonio Negrin Guerrero

student•

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')

Jose Fabio Ortega Estrada

student•

Gracias por tu aporte los puse en mis notas para repesar luego, aunque me salieron algunos errores, pero ya los corregí. Lo estructuré de la siguiente manera:

// 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')

Carlos Rafael Córdova Flores

student•

Cuál es la diferencia entre

Array<number> ó number[ ]

Tanelo Mondaca Silva

student•

Ambos tienen la misma función y producen el mismo resultado de tipado, pero por convención es mejor usar la segunda opción ( number[ ]) ya que la otra genera problemas al trabajar con otras librerías, como React por ejemplo

Diego Fernando Velesaca Orellana

student•

Eh trabajadocon react y no eh tenido ningun problema al declarar arreglos usando:

Array<number>

Alex hernandez mitre

student•

o sea que REACT está hecho en TS ?

Nicolas Molina

teacher•

Hola, no realmente React se quiere mantener agnóstico del tipado y si bien esta tiene gran soporte para TypeScript no está hecha en TS como si lo está Jest o Redux.

TypeScript introduce este concepto de tuplas; sin embargo, también podemos hacer esto con "Destructuring assignment" de JavaScript.

let a, b, rest;
[a, b] = [10, 20];

Carlos Valdez

student•

me imagino las tuplas como una especie de constructor que usamos en las clases pero aislado. Alguien mas piensa asi?

J Rafael Otero Lopez

student•

### ¿Cuándo conviene usar tuplas en TypeScript? Casos REALES:

Las tuplas son útiles cuando **el orden y el tipo de cada posición tienen significado**, y cuando **no quieres (o no necesitas) crear un objeto completo**. Funcionan como pequeños contenedores posicionales donde cada índice representa algo específico.

**Casos prácticos donde destacan:**

- **Coordenadas o pares matemáticos:** (x, y), (lat, lon), (min, max). El orden importa y usar un objeto sería más verboso.

- **Retornar múltiples valores de una función:** permiten destructurar de forma clara y eficiente sin crear un objeto nuevo cada vez.

- **Estructuras de datos compactas:** como eventos rápidos (\["click", x, y]) o filas tipo CSV donde cada columna ya tiene una posición definida.

- **Datos de juegos o motores físicos:** vectores o rectángulos (x, y, width, height) que se usan millones de veces y deben ser livianos.

**Cuándo evitar tuplas:**

Cuando cada valor necesita un nombre propio o el orden no aporta semántica. En esos casos, un objeto es más claro.

En resumen: las tuplas sirven cuando la **posición comunica significado** y buscas **simplicidad y eficiencia** sin sacrificar legibilidad.

Victor Manuel Arroyave Castañeda

student•

Teniendo en cuenta que las tuplas tienen una cantidad de valores limitados según le indiquemos, se pude decir que esto ayudaria a mejorar el espacio en memoria o ayudaria a un mejor rendiento?

Jose Imbacuan

student•

serian las tuplas parecidas a las de python?

Kevin Fiorentino

student•

Así es, son el mismo concepto o la misma idea de almacenamiento de datos.

Sofia Libertad Montoya Herrera

student•

Holaa!! Por aqui dejo un ejemplo corto de como definí mi tupla y el tipado que realicé con nombres de campos

type UserTuple = [name: string, age: number, isDeveloper: boolean];
let user: UserTuple = ['example01', 23, true];
user = ['example02', 25, false];

Javier Raul Valencia Duque

student•

Hola @nico!, puedes contestarme esta pregunta el por que me permite esta estructura en el código

si intento hacer un push([0]) en esa posición no me lo permite pero si se lo agrego en el dato number? lo agrega pero lo pone de ultimo me puedes explicar porfa y muchas gracias

Cristhian Felipe

student•

Sinceramente este profesor tiene un conocimiento muy avanzado, y explica de una manera muy sencilla, es mi profesor favorito.

Eminson Mendoza

student•

Las tuplas en TypeScript son estructuras de datos que permiten agrupar múltiples valores de diferentes tipos en una sola entidad. A diferencia de los arrays, que son homogéneos, las tuplas pueden contener elementos de distintos tipos y tienen una longitud fija.

Ejemplo de la vida real: Piensa en un registro de un estudiante: puedes tener una tupla que contenga el nombre del estudiante (string), su edad (number) y si está aprobado (boolean). Esto podría representarse como:

let estudiante: [string, number, boolean] = ["Juan", 20, true];

Esta tupla agrupa la información relevante de manera estructurada y accesible.

Henry Alexander Velásquez Rosas

student•

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.

David Fernandez Mercader

student•

Si es que usar name como nombre de variable suele ser un poco contraproducente porque suele ser atributo o propiedad de otros elementos/objetos como de window.

Siempre es mejor poner nombres mas "elaborados" para evitar conflictos de keywords o propiedades.

Royer Guerrero Pinilla

student•

// Arrays. Unlimited elements

const prices: (number | string)\[] = \[1, 2, 3, 4, 4];

prices.push('hello');



// Tuples. Limited elements (`useState` in React use it)

const user: \[string, number] = \['royjuni', 231];



// Destructuration

const \[username, id] = user;

console.log(username, id)

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

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

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

//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)

//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

// 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')

// 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')

// Arrays. Unlimited elements

const prices: (number | string)\[] = \[1, 2, 3, 4, 4];

prices.push('hello');

// Tuples. Limited elements (`useState` in React use it)

const user: \[string, number] = \['royjuni', 231];

// Destructuration

const \[username, id] = user;

console.log(username, id)

Tuples

Introducción

¿Ya tomaste el Curso de Fundamentos de TypeScript?

Configuración del proyecto con ts-node

New Types

Enums

Tuples

Unknown type

Never type

Funciones

Parámetros opcionales y nullish-coalescing

Parámetros por defecto

Parámetros rest

Sobrecarga de funciones: el problema

Sobrecarga de funciones: la solución

Interfaces

Interfaces

Estructuras complejas

Extender interfaces

Propiedades de solo lectura

Proyecto

Ejemplo de CRUD

Omit y Pick Type

Partial y Required Type

Readonly Type

Acceder al tipado por indice

ReadonlyArray

Próximos pasos

Toma el Curso de Programación Orientada a Objetos con TypeScript