TypeScript Academy · Lezione

Spread in array e oggetti

Espanda i valori mantenendo tipi accurati.

Spread in array e oggetti è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Espandere i valori

L'operatore spread ... copia gli elementi di un array o le proprietà di un oggetto in uno nuovo. TypeScript tiene traccia con precisione del tipo risultante, un aspetto fondamentale per gli aggiornamenti immutabili.

Spread degli array

Espanda due array in uno nuovo per concatenarli. Il tipo degli elementi risultanti è l'unione dei tipi degli elementi delle due sorgenti.

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

Combinare spread e valori letterali

Può alternare elementi spread e singoli valori. L'ordine viene preservato esattamente come è stato scritto.

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

Tipi degli elementi spread

Quando le sorgenti spread hanno tipi di elementi diversi, il risultato è un array della loro unione. Può aggiungere un'annotazione oppure lasciare che sia l'inferenza a occuparsene.

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

Spread degli oggetti

Lo spread degli oggetti copia le proprietà enumerabili proprie in un nuovo oggetto. Il tipo risultante unisce le strutture delle sorgenti.

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

Lo spread sovrascrive le proprietà

Quando le chiavi coincidono, prevale l'ultima. Espanda un oggetto e poi sovrascriva campi specifici: è la base degli aggiornamenti immutabili.

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

L'ordine determina quale valore prevale

La precedenza delle proprietà segue l'ordine delle sorgenti. Inserisca le sovrascritture dopo lo spread perché prevalgano; se le inserisce prima, sarà lo spread a sovrascriverle.

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

Tipo di una proprietà sovrascritta

Se una sovrascrittura modifica il tipo di una proprietà, il tipo risultante riflette il nuovo tipo. TypeScript restringe il tipo all'ultima occorrenza.

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

Spread è una copia superficiale

Spread copia un solo livello in profondità. Gli oggetti annidati sono condivisi per riferimento, quindi modificare un campo annidato influisce su entrambe le copie. Per ottenere una copia più profonda, applicare spread anche all'oggetto annidato.

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

Spread e readonly

L'applicazione di spread a un array o a un oggetto readonly produce una copia nuova e modificabile. Il modificatore readonly non viene mantenuto con spread, perché si sta creando un nuovo valore.

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

Pattern di aggiornamento immutabile

Spread è il modo idiomatico per aggiornare lo stato senza modificarlo: copiare il vecchio oggetto, sovrascrivere i campi cambiati e restituire il nuovo oggetto.

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

Verifica rapida

Verifichi la comprensione dei tipi spread e della precedenza.

Riepilogo

Spread copia gli elementi di un array o le proprietà di un oggetto in un nuovo valore. Lo spread di array concatena gli array con un tipo unione per gli elementi; lo spread di oggetti fonde le strutture e, in caso di conflitto tra chiavi, prevale l'ultima occorrenza. Spread è una copia superficiale: gli oggetti annidati restano condivisi, e produce valori nuovi e modificabili anche a partire da sorgenti readonly. È il pattern idiomatico per gli aggiornamenti immutabili.

Domande Frequenti

La lezione «Spread in array e oggetti» è gratuita?

Sì — il testo completo di «Spread in array e oggetti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Spread in array e oggetti»?

Espanda i valori mantenendo tipi accurati. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Spread in array e oggetti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a TypeScript Academy