Desestructuración de arrays y tuplas
Desestructure arrays y tuplas con los tipos de elementos correctos.
Desestructuración de arrays y tuplas es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.
Desestructuración posicional
La desestructuración de arrays vincula las variables por posición en lugar de hacerlo por nombre. Con las tuplas, cada posición tiene un tipo específico, lo que permite una extracción precisa y ordenada.
Desestructuración básica de arrays
Los corchetes a la izquierda extraen los elementos según el orden de sus índices. En un array normal, todas las vinculaciones comparten el tipo de sus elementos.
const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30Anotar un patrón de tupla
Anote el patrón asignando a la vinculación un tipo de tupla después del patrón. Cada posición obtiene su propio tipo: aquí, primero un tipo number y después un tipo string.
const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 twoLos tipos siguen la posición
En una tupla, el tipo de cada índice es fijo. La primera vinculación es de tipo number y la segunda, de tipo string; intercambiar los valores produciría un error de tipos.
const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)Omitir elementos con comas
Deje un espacio mediante una posición vacía entre comas para omitir una posición que no necesite. El tipo del elemento omitido simplemente se ignora.
const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0Desestructuración con rest
Un elemento rest reúne los elementos restantes en un array. En una tupla, su tipo refleja las posiciones que quedan.
const [head, ...tail] = [1, 2, 3, 4]
console.log(head) // 1
console.log(tail.length) // 3Tipo rest a partir de una tupla
Cuando desestructura una tupla con rest, TypeScript infiere que la variable rest es una tupla de los elementos restantes y conserva sus tipos.
const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])Intercambiar variables
La desestructuración de arrays permite aplicar un truco práctico: intercambiar dos valores sin una variable temporal. Los tipos deben ser compatibles para que el intercambio supere la comprobación de tipos.
let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1Desestructuración de valores devueltos por funciones
Las funciones que devuelven tuplas combinan perfectamente con la desestructuración; el patrón de React useState es exactamente eso.
function useCounter(): [number, () => number] {
let n = 0
return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())Valores predeterminados en patrones de arrays
Proporcione un valor predeterminado para una posición que podría ser undefined. El valor predeterminado se aplica únicamente cuando falta el elemento o es undefined.
const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0Desestructuración anidada de arrays
Puede desestructurar arrays dentro de otros arrays en una sola instrucción. Los tipos se anidan del mismo modo, pero tenga en cuenta la legibilidad cuando trabaje con estructuras profundas.
const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4Comprobación rápida
Compruebe su comprensión de la desestructuración de arrays y tuplas.
Resumen
La desestructuración de arrays vincula por posición; anote el patrón con un tipo de tupla después de este para que cada índice obtenga su propio tipo. Omita elementos con posiciones vacías entre comas, reúna el resto con un elemento rest, que sigue siendo una tupla de las posiciones restantes, y proporcione valores predeterminados para las posiciones que podrían faltar. Las tuplas devueltas junto con la desestructuración permiten patrones potentes como useState.
Preguntas frecuentes
¿La lección «Desestructuración de arrays y tuplas» es gratis?
Sí — el texto completo de «Desestructuración de arrays y tuplas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Desestructuración de arrays y tuplas»?
Desestructure arrays y tuplas con los tipos de elementos correctos. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Desestructuración de arrays y tuplas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Tipos en la desestructuración de objetos
- Desestructuración de arrays y tuplas
- Valores predeterminados en la desestructuración
- Patrones de desestructuración anidada