TypeScript Academy · Lezione

Valori predefiniti nel destructuring

Combini in sicurezza valori predefiniti e annotazioni di tipo.

Valori predefiniti nel destructuring è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Completare le parti mancanti

I valori predefiniti della destrutturazione forniscono un'alternativa quando una proprietà o un elemento manca o è undefined. In combinazione con l'inferenza di TypeScript, rendono le configurazioni opzionali pratiche e sicure.

Un valore predefinito nella destrutturazione degli oggetti

Scriva = value dopo un'associazione per fornirle un'alternativa. Se la proprietà è assente o undefined, viene utilizzato il valore predefinito.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Valori predefiniti con proprietà opzionali

I valori predefiniti si abbinano naturalmente alle proprietà opzionali (?). Il valore predefinito elimina il caso undefined, quindi la variabile risultante ha il tipo non opzionale.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Valori predefiniti e tipi inferiti

Se non aggiunge un'annotazione, TypeScript deduce il tipo della variabile dal valore predefinito. Qui 0 rende count un number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Solo undefined attiva il valore predefinito

Un dettaglio importante: i valori predefiniti si applicano solo a undefined, mai ad altri valori falsy come 0, "" o null. Questi ultimi vengono mantenuti invariati.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Valori predefiniti nei parametri delle funzioni

I valori predefiniti nei parametri destrutturati rendono semplici le opzioni facoltative. Ogni campo può avere la propria alternativa direttamente nella firma.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

Impostare un valore predefinito per l'intero parametro

Per consentire a chi chiama la funzione di omettere completamente l'oggetto degli argomenti, assegni al parametro stesso il valore predefinito {}. Senza questa impostazione, una chiamata senza argomenti causerebbe un'eccezione.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Valori predefiniti con rinomina

Può rinominare e impostare un valore predefinito nella stessa associazione: prima rinomini, poi aggiunga il valore predefinito dopo il nuovo nome.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Valori predefiniti calcolati

Un valore predefinito può essere una qualsiasi espressione, anche una che fa riferimento ad associazioni precedenti. Viene valutato in modo lazy, solo quando il valore manca effettivamente.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Riepilogo dei valori predefiniti negli array

I valori predefiniti funzionano anche nella destrutturazione degli array e vengono applicati a ogni posizione quando un elemento manca o è undefined.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Quando i valori predefiniti sono utili

I valori predefiniti sono ideali per gli oggetti di opzioni: chi chiama la funzione specifica solo ciò che gli interessa e la funzione completa il resto con alternative sensate. Inoltre rimuovono undefined dai tipi inferiti, semplificando il corpo della funzione.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

Verifica rapida

Verifichi la sua comprensione dei valori predefiniti nella destrutturazione.

Riepilogo

I valori predefiniti della destrutturazione (= fallback) si applicano solo quando un valore manca o è undefined, mai per altri valori falsy. Rimuovono undefined dai tipi delle proprietà opzionali, possono essere inferiti o annotati, supportano la rinomina e possono fare riferimento ad associazioni precedenti. Per gli oggetti di opzioni, imposti il parametro su {} come valore predefinito, così chi chiama la funzione può ometterlo completamente.

Domande Frequenti

La lezione «Valori predefiniti nel destructuring» è gratuita?

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

Combini in sicurezza valori predefiniti e annotazioni di tipo. 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 3 di 4.

Quanto tempo richiede la lezione «Valori predefiniti nel destructuring»?

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