TypeScript Academy · Les

?. en ?? combineren

Combineer optionele chaining met verstandige standaardwaarden

Les 3 van 413 stappen

?. en ?? combineren is een gratis TypeScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Een perfecte combinatie

Optional chaining en nullish coalescing zijn ontworpen om samen te werken. Met het patroon obj?.value ?? fallback lees je veilig een geneste waarde en geef je een standaardwaarde als die ontbreekt. Dit is een van de handigste idiomen in modern TypeScript.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Zo werkt het patroon

Eerst evalueert ?. de keten en levert de waarde of undefined op. Daarna controleert ?? dat resultaat: als het nullish is, wordt de terugvalwaarde gebruikt. Twee operatoren, één duidelijke expressie.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

Het type van het resultaat

De keten levert T | undefined op; ?? verwijdert undefined en voegt het type van de terugvalwaarde als unie toe. Met een passende terugvalwaarde is het uiteindelijke type gewoon T — er blijft geen undefined over om af te handelen.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Geldige falsey-waarden behouden

Omdat ?? alleen wordt geactiveerd voor nullish-waarden, blijft een geldige 0 die via de keten is opgehaald behouden. De terugvalwaarde wordt alleen gebruikt wanneer de eigenschap echt ontbreekt.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Diepe toegang tot configuratie

Bij diep geneste configuratie koppel je meerdere ?.-stappen aan elkaar en sluit je af met één ??. Elke ontbrekende schakel valt netjes terug op de standaardwaarde.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Standaardwaarden voor API-antwoorden

API-antwoorden laten optionele velden vaak weg. Met het gecombineerde patroon lees je die voorzichtig uit en vervang je ze door zinvolle standaardwaarden, zodat de daaropvolgende code eenvoudig blijft en geen vastlopers veroorzaakt.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Combineren met resultaten van methoden

Je kunt een keten voortzetten na functie- of methodeaanroepen en standaardwaarden voor hun resultaten instellen. Als de aanroep nullish oplevert, wordt de terugvalwaarde gebruikt.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Lange controles vermijden

Vóór deze operatoren zou je controles op null over meerdere regels schrijven. Het gecombineerde idioom vervangt een heel codeblok door één expressie, waardoor de leesbaarheid verbetert zonder dat je veiligheid verliest.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Terugvallen op een andere opzoeking

De terugvalwaarde na ?? kan zelf een andere gekoppelde opzoeking zijn, zodat je eerst een secundaire bron kunt proberen voordat je een uiteindelijke letterlijke standaardwaarde gebruikt.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Combineren met elementtoegang

Het patroon werkt ook met toegang tot array-elementen: lees een element via ?.[i] en geef het een standaardwaarde met ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Een instellingenlezer uit de praktijk

Alles bij elkaar levert dit een instellingenlezer op die veilig door optionele lagen navigeert en een bruikbare waarde garandeert. Dit is TypeScript voor productie die je vaak zult schrijven.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Korte controle

Toets of je begrijpt hoe je ?. en ?? combineert.

Beantwoord dit in de interactieve les

Samenvatting: ?. en ?? combineren

Je hebt het idioom obj?.value ?? fallback geleerd:

?. navigeert veilig naar beneden en levert de waarde of undefined op.
?? levert alleen een standaardwaarde wanneer het resultaat nullish is.
Het uiteindelijke type bevat geen undefined meer en wordt vaak een eenvoudig T.
Geldige falsey-waarden zoals 0 blijven behouden.

Hierna volgen optionele aanroepen en optionele elementtoegang.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 101
Lessen: 352

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “?. en ?? combineren” gratis?

Ja — de volledige tekst van “?. en ?? combineren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “?. en ?? combineren”?

Combineer optionele chaining met verstandige standaardwaarden Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “?. en ?? combineren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar TypeScript Academy