Come funzionano i parametri opzionali delle funzioni e le proprietà opzionali degli oggetti in TypeScript, quali sono le differenze e quali sono le sfide nell'utilizzarli? Porta esempi di problemi e errori tipici.

Risposta.

I parametri opzionali delle funzioni sono indicati con un punto interrogativo (?) dopo il nome del parametro. Lo stesso vale per le proprietà opzionali negli oggetti (interfacce o tipi).

• Per le funzioni:

function greet(name?: string) {
  console.log(`Hello, ${name ?? 'stranger'}`);
}
greet(); // Hello, stranger
greet('John'); // Hello, John

• Per gli oggetti:

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

Sfide:

• Un parametro opzionale può non essere passato durante la chiamata della funzione, e quindi il valore sarà undefined.
• Una proprietà opzionale può mancare nell'oggetto.
• Non confondete: se in un'interfaccia una proprietà non è specificata come opzionale, è obbligatoria!
• Un parametro opzionale deve andare per ultimo nell'elenco degli argomenti della funzione.

Domanda ingannevole.

Se la funzione è dichiarata con un parametro opzionale di tipo string (function fn(x?: string)), può essere chiamata esplicitamente con undefined? Qual è la differenza tra fn() e fn(undefined)?

Risposta: Sì, è possibile chiamare con undefined: fn(undefined) e fn() — il risultato è lo stesso, ma all'interno la funzione riceverà x === undefined. Ma se un valore di default è definito nella firma:

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

Se l'argomento non è stato specificato come opzionale (senza ? o valore di default), la chiamata fn() causerà un errore di compilazione.

Esempi di errori reali dovuti alla mancanza di conoscenza delle sottigliezze dell'argomento.

---

Storia

Nell'interfaccia user è stata specificata la proprietà phone: string (senza ?), ma è stata dimenticata durante la creazione dell'istanza dell'oggetto. Di conseguenza, il compilatore TypeScript ha iniziato a lamentarsi per l'assenza della proprietà obbligatoria. La soluzione temporanea è stata quella di aggiungere phone: undefined, ma questo contraddiceva il tipo, dato che string !== undefined, e ha causato ancora più errori di validazione.

---

Storia

Sono stati definiti diversi parametri opzionali in una funzione, ma sono stati posizionati non alla fine dell'elenco degli argomenti. TypeScript ha restituito un errore e spostando i parametri è cambiato l'ordine di corrispondenza dei valori passati ai parametri, causando confusione e un malfunzionamento della funzione.

---

Storia

I campi opzionali nelle interfacce sono stati dimenticati nella descrizione del tipo di dati per un'API esterna (ad esempio, cognome cliente? string), il che ha comportato che durante il cambiamento dello schema da una parte questi campi non arrivavano più, mentre dall'altra il codice iniziava a generare errori alla lettura senza controllo su undefined.