Antwoord.

Het mechanisme van optional chaining (?.) is geïntroduceerd in JavaScript voor veilig en eenvoudig toegang tot eigenschappen en methoden van objecten die mogelijk niet gedefinieerd zijn. In TypeScript is het bijzonder nuttig omdat het helpt om runtime fouten te voorkomen die verband houden met het verwijzen naar eigenschappen of methoden van undefined of null.

Achtergrond

Voor de introductie van optional chaining moesten ontwikkelaars handmatig de aanwezigheid van elk niveau van geneste objecten controleren, wat de code lang en moeilijk leesbaar maakte:

if (obj && obj.a && obj.a.b) {
  // ...
}

Probleem

Bij het verwijzen naar geneste eigenschappen van een niet-gedefinieerd object kan een runtime fout optreden: Cannot read property 'x' of undefined. Bovendien bemoeilijken lange ketens van controles het onderhoud en de begrijpelijkheid van de code.

Oplossing

Optional chaining (?.) stelt je in staat om naar geneste eigenschappen, methoden of array-elementen te verwijzen, waarbij automatisch undefined wordt geretourneerd als een deel van de keten gelijk is aan null of undefined.

Codevoorbeeld:

interface User {
  name: string;
  address?: {
    city?: string;
  };
}

const user: User = { name: 'Ivan' };
console.log(user.address?.city); // undefined

Belangrijke kenmerken:

Maakt het mogelijk om compacte, veilige en begrijpelijke code te schrijven.
Werkt met toegangen tot eigenschappen, methoden en array-indexen.
Het type van de geretourneerde waarde is T | undefined, wat door de TypeScript-compiler wordt herkend en helpt om fouten te voorkomen.

Vragen met een valstrik.

Kan optional chaining worden gebruikt aan de linkerkant van de toewijzingsoperator? Bijvoorbeeld: user.address?.city = 'Moscow'?

Nee, optional chaining kan niet worden gebruikt in een linker toewijzing, dit zal een compilatiefout veroorzaken. Optional chaining werkt alleen tijdens het lezen, niet tijdens het schrijven.

Kan optional chaining worden gebruikt om een methode aan te roepen, als het object mogelijk niet gedefinieerd is? Bijvoorbeeld: user?.logInfo()?

Ja, als het object vóór de methode-aanroep mogelijk undefined/null kan zijn, zal de aanroep user?.logInfo() geen fout opleveren en simpelweg undefined retourneren als user niet gedefinieerd is.

user?.logInfo(); // als user gedefinieerd is, wordt logInfo aangeroepen, anders gebeurt er niets

Wat is het verschil tussen optional chaining en de oude stijl van de '&&' operator, bijvoorbeeld: user && user.address && user.address.city?

Optional chaining is korter, werkt voor alle types (inclusief methoden en arrays), en TypeScript houdt rekening met het bij typecontrole. Belangrijk is dat bij gebruik van de '&&' operator je per ongeluk een genest waarde kunt krijgen in plaats van true/false of undefined. Optional chaining geeft daarentegen gegarandeerd het verwachte type of undefined, wat wordt weerspiegeld in type-inferentie.

Typische fouten en anti-patronen

Verwachting dat optional chaining "geneste" objecten creëert bij toewijzing — dat is niet het geval.
Gebruik van optional chaining bij het verwijzen naar variabelen die op type nooit undefined/null kunnen zijn (overbodige en nutteloze code).
De gewoonte om zonder nadenken optional chaining overal toe te passen, wat het onderhoud van de code bemoeilijkt.

Voorbeeld uit de praktijk

Negatief geval

In de code worden lange ketens van optional chaining gebruikt, zelfs waar de variabelen volgens de bedrijfslogica altijd gedefinieerd zijn:

order?.customer?.address?.city = 'London';

Voordelen:

Beschermt tegen mogelijke fouten als de eigenschappen toch niet gedefinieerd zijn.

Nadelen:

Toewijzing vindt niet plaats als een van de eigenschappen ontbreekt, zonder melding of foutafhandeling; er ontstaat "verborgen" logica, waardoor de code verwarrend wordt.

Positief geval

Optional chaining wordt alleen gebruikt bij het werken met externe gegevens of in situaties waar waarden daadwerkelijk undefined kunnen zijn:

const city = apiResponse?.info?.location?.city || 'Unknown';