TypeScript Academy · Lección

Spread en arrays y objetos

Expanda valores conservando tipos precisos.

Spread en arrays y objetos 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.

Propagar valores

El operador spread ... copia los elementos de un array o las propiedades de un objeto en uno nuevo. TypeScript realiza un seguimiento preciso del tipo resultante, algo fundamental para las actualizaciones inmutables.

Spread de arrays

Propague dos arrays en uno nuevo para concatenarlos. El tipo de los elementos resultante es la unión de los tipos de elementos de ambos orígenes.

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

Combinar spreads y literales

Puede intercalar elementos spread con valores individuales. El orden se conserva exactamente tal como se ha escrito.

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

Tipos de los elementos spread

Cuando los orígenes spread tienen tipos de elementos diferentes, el resultado es un array de su unión. Puede anotar el tipo o dejar que la inferencia haga el trabajo.

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

Spread de objetos

El spread de objetos copia las propiedades enumerables propias en un objeto nuevo. El tipo resultante combina las formas de los objetos de origen.

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

El spread sobrescribe propiedades

Cuando las claves coinciden, gana la última. Propague un objeto y sobrescriba después campos específicos: esta es la base de las actualizaciones inmutables.

const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37

El orden determina cuál gana

La precedencia de las propiedades sigue el orden de los orígenes. Coloque las sobrescrituras después del spread para que prevalezcan; si las coloca antes, el spread las sobrescribirá.

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

Tipo de una propiedad sobrescrita

Si una sobrescritura cambia el tipo de una propiedad, el tipo resultante refleja el nuevo tipo. TypeScript se queda con el tipo de la última aparición.

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

Spread es una copia superficial

Spread copia un nivel de profundidad. Los objetos anidados se comparten por referencia, por lo que modificar un campo anidado afecta a ambas copias. Aplique también spread al objeto anidado para obtener una copia más profunda.

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

Spread y readonly

Aplicar spread a un array o un objeto readonly produce una copia nueva y mutable. El modificador readonly no se conserva al aplicar spread, ya que se está creando un valor nuevo.

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

Patrón de actualización inmutable

Spread es la forma idiomática de actualizar el estado sin mutarlo: copie el objeto anterior, sobrescriba los campos modificados y devuelva el objeto nuevo.

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

Comprobación rápida

Compruebe cuánto entiende los tipos y la precedencia de spread.

Repaso

Spread copia los elementos de un array o las propiedades de un objeto en un valor nuevo. El spread de arrays concatena con un tipo unión para los elementos; el spread de objetos combina sus estructuras y, si hay claves repetidas, prevalece la última aparición. Spread es una copia superficial: los objetos anidados siguen compartidos, y produce valores nuevos y mutables incluso a partir de fuentes readonly. Es el patrón idiomático para realizar actualizaciones inmutables.

Preguntas frecuentes

¿La lección «Spread en arrays y objetos» es gratis?

Sí — el texto completo de «Spread en arrays y objetos» 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 «Spread en arrays y objetos»?

Expanda valores conservando tipos precisos. 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 «Spread en arrays y objetos»?

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

← Volver a TypeScript Academy