TypeScript Academy · Lezione

Tipi per il destructuring degli oggetti

Definisca il tipo delle proprietà di un oggetto destrutturato senza confondere la sintassi per la ridenominazione.

Tipi per il destructuring degli oggetti è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.

La destrutturazione e i tipi

La destrutturazione di oggetti estrae le proprietà di un oggetto in variabili locali. Con TypeScript, è possibile annotare la struttura destrutturata, ma la sintassi nasconde una trappola famosa. Vediamo come procedere correttamente.

Destrutturazione di base degli oggetti

La destrutturazione semplice estrae le proprietà in base al nome. TypeScript deduce il tipo di ogni variabile dall'oggetto di origine.

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

Annotare l'intero pattern

Per annotare le variabili destrutturate, si inserisce il tipo dopo l'intero pattern, descrivendo la struttura dell'oggetto, non dopo ogni variabile.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Destrutturare i parametri delle funzioni

È un pattern molto comune: si destruttura direttamente nella firma un oggetto passato come parametro, annotandone la struttura. All'interno del corpo, name e id sono variabili locali tipizzate.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

La trappola della confusione con i due punti

Nella destrutturazione, i due punti indicano una ridenominazione, non un'annotazione. Scrivendo { name: string } si crea una variabile chiamata string che contiene il valore di name: quasi mai è ciò che si desidera.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Rinominare e annotare insieme

Se è necessario sia rinominare sia specificare il tipo, rinomini con i due punti e poi annoti l'intero pattern. L'annotazione della struttura continua a usare i nomi originali delle proprietà.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Utilizzare un tipo denominato

Per qualsiasi struttura non banale, preferisca un'interfaccia denominata a una struttura inline. È più leggibile e riutilizzabile.

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

Destrutturare solo alcune proprietà

Non è necessario estrarre ogni campo. Scelga ciò che le serve; per le variabili locali create, il tipo delle altre proprietà dell'oggetto viene ignorato.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Destrutturare i valori restituiti

Quando una funzione restituisce un oggetto, può destrutturare immediatamente il risultato. I tipi del valore restituito vengono assegnati alle variabili locali.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Raccogliere il resto

Un pattern rest raccoglie le proprietà rimanenti in un nuovo oggetto. TypeScript lo tipizza come il tipo della sorgente meno le chiavi estratte.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Riepilogo: inline o denominato

Le strutture inline vanno bene per pattern piccoli e utilizzati una sola volta. Ricorra a un tipo denominato non appena la struttura cresce o viene ripetuta. E ricordi: i due punti rinominano, mentre l'annotazione viene dopo la graffa di chiusura.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Verifica rapida

Verifichi la sua comprensione della destrutturazione tipizzata degli oggetti.

Riepilogo

Le annotazioni di tipo nella destrutturazione vanno dopo l'intero pattern e descrivono la struttura dell'oggetto. I due punti all'interno del pattern rinominano un'associazione, non la annotano. Destrutturi i parametri e i valori restituiti delle funzioni usando annotazioni della struttura o tipi denominati, estragga solo i campi necessari e utilizzi un pattern rest per raccogliere il resto.

Domande Frequenti

La lezione «Tipi per il destructuring degli oggetti» è gratuita?

Sì — il testo completo di «Tipi per il destructuring degli 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 «Tipi per il destructuring degli oggetti»?

Definisca il tipo delle proprietà di un oggetto destrutturato senza confondere la sintassi per la ridenominazione. 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 1 di 4.

Quanto tempo richiede la lezione «Tipi per il destructuring degli 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