TypeScript Academy · Les

Geneste destructureringspatronen

Voorzie diep geneste destructureringsuitdrukkingen van typen

Les 4 van 413 stappen

Geneste destructureringspatronen is een gratis TypeScript Academy-les op CoddyKit. Dit is les 4 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.

In geneste gegevens duiken

Met geneste destructurering pak je in één instructie waarden uit objecten binnen andere objecten. Dat is beknopt, maar de interactie met types is het begrijpen waard — en overmatig gebruik kan de leesbaarheid schaden.

Een geneste eigenschap destructureren

Spiegel de vorm van het object aan de linkerkant. Om data.user.name te bereiken, nest je een patroon onder user.

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

De buitenste naam wordt niet gebonden

Een subtiele valkuil: in { user: { name } } is user alleen een pad, geen binding. Je krijgt name, maar daarna bestaat er geen variabele met de naam user.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Geneste destructurering typeren

Annoteer met de volledige geneste vorm na het patroon. Elk niveau weerspiegelt de structuur van het object.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Benoemde types lezen beter

Inline-geneste vormen worden al snel onoverzichtelijk. Een benoemde interface houdt de annotatie netjes en maakt geneste extractie nog steeds mogelijk.

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

Beide niveaus uitpakken

Als je ook het buitenste object nodig hebt, pak je dat afzonderlijk uit en destructureer je de leden ervan in een volgende stap. Dat is vaak duidelijker dan diepe nesting.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Nesting combineren met standaardwaarden

Standaardwaarden kunnen op elk niveau voorkomen. Geef een mogelijk ontbrekend genest veld een terugvalwaarde op de plek waar je het bindt.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Ontbrekende subobjecten een standaardwaarde geven

Als een volledig genest object kan ontbreken, geef je het vóór het destructureren van de velden de standaardwaarde {} — anders veroorzaakt het benaderen van een eigenschap van undefined een fout.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Geneste array in een object

Je kunt object- en arraypatronen combineren. Hier halen we het eerste label uit een geneste array in één regel.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Afwegingen rond leesbaarheid

Diepe geneste patronen besparen regels, maar kunnen de bedoeling verbergen. Drie niveaus diep, met standaardwaarden, zijn lastig snel te overzien. Als een lezer moet pauzeren, splits je het patroon op in stappen.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Een evenwichtig voorbeeld

Eén niveau nesting met een paar velden is meestal de ideale middenweg — beknopt zonder cryptisch te worden.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Korte controle

Controleer je begrip van geneste destructurering.

Beantwoord dit in de interactieve les

Samenvatting

Geneste destructurering weerspiegelt de vorm van het object om innerlijke waarden te bereiken. Buitenste sleutels zijn paden, geen bindings, dus alleen de binnenste namen worden variabelen. Annoteer met de volledige geneste vorm of een benoemd type, geef ontbrekende subobjecten de standaardwaarde {} voordat je hun velden destructureert en voeg naar behoefte arraypatronen toe. Houd nesting ondiep en splits diepe patronen voor de leesbaarheid op in stappen.

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 “Geneste destructureringspatronen” gratis?

Ja — de volledige tekst van “Geneste destructureringspatronen” 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 “Geneste destructureringspatronen”?

Voorzie diep geneste destructureringsuitdrukkingen van typen 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 4 van 4.

Hoe lang duurt de les “Geneste destructureringspatronen”?

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