Antwoord.

Optionele eigenschappen in TypeScript worden aangeduid met een vraagteken (?) achter de naam van de eigenschap. Dit betekent dat de eigenschap ofwel is gedefinieerd, ofwel afwezig kan zijn in het object. Dit is handig bij het beschrijven van structuren waarin niet alle velden verplicht zijn.

Voorbeeld:

interface User {
  id: number;
  name?: string;
}

const u1: User = { id: 1 };        // OK
const u2: User = { id: 2, name: 'Ivan' }; // OK

Fijnere details:

• Een optionele eigenschap kan niet alleen undefined zijn, maar ook volledig afwezig in het object.
• Controle op de aanwezigheid van een waarde (bijvoorbeeld, if (user.name)) maakt geen onderscheid tussen undefined en afwezigheid.
• Een veelvoorkomende bug is het niet in aanmerking nemen dat de eigenschap undefined kan zijn en het aanroepen van methoden/eigenschappen zonder controle.

Om je te beschermen:

• Gebruik controles op undefined:

if (user.name !== undefined) {
  console.log(user.name.toUpperCase());
}

• Je kunt de optionele ketenoperator gebruiken:

console.log(user.name?.toUpperCase());

Een vraag met een valstrik.

Als een object de interface { foo?: string } beschrijft, kan de eigenschap foo dan altijd alleen een string of undefined zijn? Kan je er bijvoorbeeld de waarde null in opslaan?

Onjuiste antwoord:

• "Een optionele eigenschap kan alleen een string of undefined zijn, iets anders is niet toegestaan."

Juiste antwoord:

• Eigenlijk, als je expliciet null toewijst, staat TypeScript dit toe, maar alleen als het type is uitgebreid naar string | null. Standaard is dit alleen string of undefined.
• Voorbeeld:

interface A { foo?: string }
let x: A = { foo: null }; // Fout!

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

---

Verhaal

In een groot project kwamen sommige objecten van de server zonder bepaalde optionele velden. De programmeur riep direct methoden op deze eigenschappen aan (bijvoorbeeld, toLowerCase()), wat leidde tot runtime-fouten als het veld ontbrak. Om het probleem op te lossen, implementeerde het team strenge controles en lintersregels voor toegang tot optionele velden.

---

Verhaal

In logische uitdrukkingen verwarden ze de aanwezigheid van de eigenschap met zijn waarheidswaarde: if (user.email) werkte niet voor lege strings, hoewel de eigenschap was gedefinieerd. Dit leidde tot een bug waardoor sommige meldingen niet naar gebruikers werden verzonden.

---

Verhaal

Het team besloot de waarde null aan een optionele eigenschap toe te wijzen, in de veronderstelling dat dit correct was. TypeScript gaf een foutmelding, en om dit te omzeilen moest het type worden uitgebreid naar string | null, wat een herziening van de hele bedrijfslogica voor deze objecten vereiste.