TypeScript Academy · Les

Standaardwaarden bij destructurering

Combineer standaardwaarden veilig met typeannotaties

Les 3 van 413 stappen

Standaardwaarden bij destructurering 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.

De lege plekken invullen

Standaardwaarden bij destructurering bieden een terugvalwaarde wanneer een eigenschap of element ontbreekt of undefined is. In combinatie met de type-inferentie van TypeScript maken ze optionele configuratie praktisch en veilig.

Een standaardwaarde bij objectdestructurering

Schrijf = value na een binding om die een terugvalwaarde te geven. Als de eigenschap ontbreekt of undefined is, wordt in plaats daarvan de standaardwaarde gebruikt.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Standaardwaarden met optionele eigenschappen

Standaardwaarden sluiten goed aan bij optionele eigenschappen (?). De standaardwaarde verwijdert het geval undefined, waardoor de resulterende variabele het niet-optionele type heeft.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Standaardwaarden en afgeleide types

Als je geen annotatie gebruikt, leidt TypeScript het type van de variabele af uit de standaardwaarde. Hier maakt 0 van count een number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Alleen undefined activeert de standaardwaarde

Een subtiel punt: standaardwaarden worden alleen toegepast bij undefined, nooit bij andere waarden die als onwaar gelden, zoals 0, "" of null. Die waarden worden ongewijzigd doorgegeven.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Standaardwaarden in functieparameters

Standaardwaarden in gedestructureerde parameters maken optionele opties eenvoudig. Elk veld kan direct in de handtekening een eigen terugvalwaarde krijgen.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

De volledige parameter een standaardwaarde geven

Als aanroepers het argumentobject volledig mogen weglaten, geef je de parameter zelf de standaardwaarde {}. Zonder deze standaardwaarde zou een aanroep zonder argument een fout veroorzaken.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Standaardwaarden met hernoemen

Je kunt hernoemen en een standaardwaarde geven in één binding: hernoem eerst en voeg de standaardwaarde daarna toe na de nieuwe naam.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Berekende standaardwaarden

Een standaardwaarde kan elke expressie zijn, zelfs een expressie die naar eerdere bindings verwijst. De expressie wordt lui geëvalueerd — alleen wanneer de waarde daadwerkelijk ontbreekt.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Samenvatting van standaardwaarden voor arrays

Standaardwaarden werken ook bij arraydestructurering en worden per positie toegepast wanneer een element ontbreekt of undefined is.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Wanneer standaardwaarden goed van pas komen

Standaardwaarden zijn ideaal voor optieobjecten: aanroepers geven alleen op wat voor hen belangrijk is en de functie vult verstandige terugvalwaarden in. Bovendien verwijderen ze undefined uit afgeleide types, waardoor de functie-inhoud eenvoudiger wordt.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

Korte controle

Controleer je begrip van standaardwaarden bij destructurering.

Beantwoord dit in de interactieve les

Samenvatting

Standaardwaarden bij destructurering (= fallback) worden alleen toegepast wanneer een waarde ontbreekt of undefined is — nooit bij andere waarden die als onwaar gelden. Ze verwijderen undefined uit types van optionele eigenschappen, kunnen worden afgeleid of geannoteerd, ondersteunen hernoemen en mogen naar eerdere bindings verwijzen. Geef bij optieobjecten de parameter de standaardwaarde {}, zodat aanroepers het object volledig kunnen weglaten.

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 “Standaardwaarden bij destructurering” gratis?

Ja — de volledige tekst van “Standaardwaarden bij destructurering” 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 “Standaardwaarden bij destructurering”?

Combineer standaardwaarden veilig met typeannotaties 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 “Standaardwaarden bij destructurering”?

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