TypeScript Academy · leksjon

Nestede destruktureringsmønstre

Typ dypt nestede destruktureringsuttrykk.

Leksjon 4 av 413 trinn

Nestede destruktureringsmønstre er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hente verdier fra nestede data

Nestet destrukturering henter ut verdier fra objekter inni objekter i én setning. Det er kortfattet, men samspillet med typer har noen sider det er verdt å forstå – og overdreven bruk kan gå ut over lesbarheten.

Destrukturere en nestet egenskap

Gjengi objektets struktur på venstresiden. For å nå data.user.name nøster du et mønster under user.

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

Det ytre navnet bindes ikke

En viktig fallgruve: I { user: { name } } er user bare en sti, ikke en binding. Du får name, men ingen variabel kalt user finnes etterpå.

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

Typeannotere nestet destrukturering

Annoter med hele den nestede strukturen etter mønsteret. Hvert nivå gjenspeiler objektstrukturen.

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

Navngitte typer er lettere å lese

Inline-nestede strukturer blir raskt uhåndterlige. Et navngitt grensesnitt holder annotasjonen ryddig, samtidig som det fortsatt er mulig å hente ut nestede verdier.

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

Hente ut begge nivåene

Hvis du også trenger det ytre objektet, henter du det ut separat og destrukturerer deretter medlemmene i et nytt trinn. Dette er ofte tydeligere enn dyp nøsting.

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

Kombinere nøsting med standardverdier

Standardverdier kan brukes på alle nivåer. Angi en reserve for et nestet felt som kan mangle, direkte der du binder det.

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

Gi manglende underobjekter en standardverdi

Når et helt nestet objekt kan mangle, gir du det standardverdien {} før du destrukturerer feltene – ellers vil tilgang til en egenskap på undefined føre til en feil.

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

Nestet array i et objekt

Du kan blande objekt- og array-mønstre. Her henter vi den første taggen fra en nestet array på én linje.

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

Avveininger for lesbarhet

Dype nestede mønstre sparer linjer, men kan skjule hensikten. Tre nivåer med standardverdier blir vanskelige å skumlese. Hvis leseren må stoppe opp, bør du dele det opp i trinn.

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

Et balansert eksempel

Ett nivå med nøsting og et par felt er vanligvis det beste kompromisset – kortfattet uten å bli kryptisk.

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

Rask kontroll

Test forståelsen din av nestet destrukturering.

Besvar den i den interaktive leksjonen

Oppsummering

Nestet destrukturering gjenspeiler objektstrukturen for å nå indre verdier. Ytre nøkler er stier, ikke bindinger, så bare de innerste navnene blir variabler. Annoter med hele den nestede strukturen eller en navngitt type, gi manglende underobjekter standardverdien {} før du destrukturerer feltene, og bland inn array-mønstre ved behov. Hold nøstingen grunn – del dype mønstre opp i trinn for bedre lesbarhet.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Nestede destruktureringsmønstre» gratis?

Ja – hele teksten i «Nestede destruktureringsmønstre» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Nestede destruktureringsmønstre»?

Typ dypt nestede destruktureringsuttrykk. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Nestede destruktureringsmønstre»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til TypeScript Academy