TypeScript Academy · Lezione

Destructuring di array e tuple

Destrutturi array e tuple con i tipi corretti per gli elementi.

Destructuring di array e tuple è 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.

Destrutturazione posizionale

La destrutturazione degli array associa le variabili in base alla posizione anziché al nome. Con le tuple, ogni posizione ha un tipo specifico, permettendo un'estrazione precisa e ordinata.

Destrutturazione di base degli array

Le parentesi quadre a sinistra estraggono gli elementi in base all'ordine degli indici. Per un array normale, ogni associazione condivide il tipo degli elementi dell'array.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Annotare un pattern tupla

Annoti assegnando all'associazione un tipo tupla dopo il pattern. Ogni posizione riceve il proprio tipo: qui prima un number e poi una string.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

I tipi seguono la posizione

In una tupla, il tipo di ogni indice è fisso. La prima associazione è un number, la seconda una string: scambiare i valori causerebbe un errore di tipo.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Saltare elementi con le virgole

Lasci uno spazio vuoto con una posizione separata da virgole per saltare una posizione che non le serve. Il tipo dell'elemento saltato viene semplicemente ignorato.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Destrutturazione con rest

Un elemento rest raccoglie gli elementi rimanenti in un array. Per una tupla, il suo tipo riflette le posizioni rimaste.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Tipo rest derivato da una tupla

Quando destruttura una tupla con un rest, TypeScript deduce per la variabile rest una tupla contenente gli elementi rimanenti, preservandone i tipi.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Scambiare variabili

La destrutturazione degli array consente un trucco elegante: scambiare due valori senza una variabile temporanea. I tipi devono essere compatibili perché lo scambio superi il controllo dei tipi.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Destrutturazione nei valori restituiti dalle funzioni

Le funzioni che restituiscono tuple si combinano perfettamente con la destrutturazione: il pattern React useState funziona esattamente così.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Valori predefiniti nei pattern array

Fornisca un valore predefinito per una posizione che potrebbe essere undefined. Il valore predefinito viene applicato solo quando l'elemento manca o è undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Destrutturazione annidata degli array

Può destrutturare array contenuti in altri array in un'unica istruzione. I tipi si annidano di conseguenza, ma tenga presente la leggibilità nelle strutture profonde.

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 4

Verifica rapida

Verifichi la sua comprensione della destrutturazione di array e tuple.

Riepilogo

La destrutturazione degli array associa in base alla posizione; annoti con un tipo tupla dopo il pattern affinché ogni indice riceva il proprio tipo. Salti gli elementi con posizioni vuote tra le virgole, raccolga il resto con un elemento rest, che rimane una tupla delle posizioni rimanenti, e fornisca valori predefiniti per le posizioni eventualmente mancanti. I valori restituiti sotto forma di tupla e la destrutturazione rendono possibili pattern come useState.

Domande Frequenti

La lezione «Destructuring di array e tuple» è gratuita?

Sì — il testo completo di «Destructuring di array e tuple» è 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 «Destructuring di array e tuple»?

Destrutturi array e tuple con i tipi corretti per gli elementi. 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 «Destructuring di array e tuple»?

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