Hoe werken optionele functieparameters en optionele objecteigenschappen in TypeScript, wat is het verschil daartussen en welke nuances zijn er bij het gebruik? Geef voorbeelden van typische problemen en fouten.

Antwoord.

Optionele functieparameters worden aangegeven met een vraagteken (?) na de naam van de parameter. Dit geldt ook voor optionele eigenschappen in objecten (interfaces of types).

• Voor functies:

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

• Voor objecten:

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

Nuances:

• Een optionele parameter mag niet worden doorgegeven bij het aanroepen van de functie, en dan zal de waarde undefined zijn.
• Een optionele eigenschap kan ontbreken in het object.
• Verwar niet: als in de interface een eigenschap niet als optioneel is aangegeven, is deze verplicht!
• Een optionele parameter moet als laatste in de argumentenlijst van de functie staan.

Vraag met een valstrik.

Als een functie is gedeclareerd met een optionele parameter van het type string (function fn(x?: string)), kan deze dan expliciet worden aangeroepen met undefined? Wat is het verschil tussen fn() en fn(undefined)?

Antwoord: Ja, het kan worden aangeroepen met undefined: fn(undefined) en fn() — het resultaat is hetzelfde, maar binnenin krijgt de functie x === undefined. Maar als er een standaardwaarde is gedefinieerd in de handtekening:

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

Als de parameter niet als optioneel is gedefinieerd (geen ? of standaardwaarde), zal het aanroepen van fn() een compilatiefout geven.

Voorbeelden van echte fouten door onbekendheid met de nuances van het onderwerp.

---

Verhaal

In de interface user werd de eigenschap phone: string (zonder ?), maar deze werd vergeten toe te voegen bij het aanmaken van een instantie van het object. Uiteindelijk begon de TypeScript-compiler te klagen over het ontbreken van de vereiste eigenschap. Een tijdelijke oplossing was om phone: undefined toe te voegen, maar dit was tegenstrijdig met het type, aangezien string !== undefined, wat leidde tot nog meer validatiefouten.

---

Verhaal

Er waren verschillende optionele parameters in een functie gedefinieerd, maar ze waren niet aan het einde van de argumentenlijst geplaatst. TypeScript gaf hierbij een fout, en bij het herschikken van de parameters veranderde de volgorde van de overeenkomst tussen de doorgegeven waarden en de parameters, wat leidde tot verwarring en onjuiste werking van de functie.

---

Verhaal

Optionele velden in interfaces werden vergeten bij het beschrijven van het gegevenstype voor een externe API (bijvoorbeeld, achternaam klant? string), waardoor bij wijziging van het schema aan de ene kant deze velden niet meer binnenkwamen, en aan de andere kant de code begon te falen bij de poging om ze te lezen zonder controle op undefined.