TypeScript Academy · Lezione

Pattern di destructuring annidati

Definisca il tipo di espressioni di destructuring profondamente annidate.

Pattern di destructuring annidati è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Accedere ai dati annidati

La destrutturazione annidata estrae valori da oggetti contenuti in altri oggetti con un'unica istruzione. È concisa, ma interagisce con i tipi in modi che vale la pena comprendere e può compromettere la leggibilità se usata eccessivamente.

Destrutturare una proprietà annidata

Riproduca la struttura dell'oggetto sul lato sinistro. Per raggiungere data.user.name, annidi un pattern sotto user.

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

Il nome esterno non viene associato

Un'insidia sottile: in { user: { name } }, user è solo un percorso, non un'associazione. Ottiene name, ma in seguito non esiste alcuna variabile chiamata user.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Tipizzare la destrutturazione annidata

Annoti con l'intera struttura annidata dopo il pattern. Ogni livello rispecchia la struttura dell'oggetto.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

I tipi denominati sono più leggibili

Le strutture annidate inline diventano rapidamente ingombranti. Un'interfaccia denominata mantiene pulita l'annotazione consentendo comunque l'estrazione annidata.

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Estrarre entrambi i livelli

Se le serve anche l'oggetto esterno, lo estragga separatamente e poi destrutturi i suoi membri in un passaggio distinto. Spesso è più chiaro rispetto a un annidamento profondo.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Combinare annidamento e valori predefiniti

I valori predefiniti possono comparire a qualsiasi livello. Fornisca un'alternativa per un campo annidato eventualmente mancante direttamente nel punto in cui lo associa.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Impostare valori predefiniti per gli oggetti annidati mancanti

Quando un intero oggetto annidato può essere assente, gli assegni {} come valore predefinito prima di destrutturarne i campi; altrimenti l'accesso a una proprietà di undefined causa un'eccezione.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Array annidato in un oggetto

Può combinare pattern di oggetti e array. Qui estraiamo il primo tag da un array annidato in un'unica riga.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Compromessi di leggibilità

I pattern profondamente annidati riducono il numero di righe, ma possono nascondere l'intento. Tre livelli di annidamento con valori predefiniti diventano difficili da leggere rapidamente. Se il lettore deve fermarsi a riflettere, divida il codice in più passaggi.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Un esempio equilibrato

Di solito, un livello di annidamento con un paio di campi rappresenta il giusto compromesso: conciso senza essere criptico.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Verifica rapida

Verifichi la sua comprensione della destrutturazione annidata.

Riepilogo

La destrutturazione annidata rispecchia la struttura dell'oggetto per raggiungere i valori interni; le chiavi esterne sono percorsi, non associazioni, quindi solo i nomi più interni diventano variabili. Annoti con l'intera struttura annidata o con un tipo denominato, assegni {} come valore predefinito agli oggetti annidati mancanti prima di destrutturarne i campi e combini i pattern array quando necessario. Mantenga l'annidamento superficiale: divida i pattern profondi in più passaggi per garantire la leggibilità.

Domande Frequenti

La lezione «Pattern di destructuring annidati» è gratuita?

Sì — il testo completo di «Pattern di destructuring annidati» è 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 «Pattern di destructuring annidati»?

Definisca il tipo di espressioni di destructuring profondamente annidate. 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 4 di 4.

Quanto tempo richiede la lezione «Pattern di destructuring annidati»?

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