TypeScript Academy · Lektion

Indlejrede destructuring-mønstre

Typ dybt indlejrede destructuring-udtryk

Lektion 4 af 413 trin

Indlejrede destructuring-mønstre er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Nå ind i indlejrede data

Indlejret destrukturering udtrækker værdier fra objekter inde i objekter i én sætning. Det er kortfattet, men det påvirker typerne på måder, der er værd at forstå – og det kan skade læsbarheden, hvis det bruges for meget.

Destrukturering af en indlejret egenskab

Spejl objektets form på venstre side. Hvis du vil nå data.user.name, skal du indlejre et mønster under user.

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

Det ydre navn bindes ikke

En vigtig fælde: I { user: { name } } er user kun en sti, ikke en binding. Du får name, men der findes bagefter ingen variabel med navnet user.

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

Typeangivelse ved indlejret destrukturering

Angiv typen med den fulde indlejrede form efter mønsteret. Hvert niveau afspejler objektstrukturen.

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

Navngivne typer er lettere at læse

Former, der er skrevet direkte ind, bliver hurtigt uhåndterlige, når de er indlejrede. En navngivet grænseflade holder typeangivelsen ren, samtidig med at du kan udtrække indlejrede værdier.

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

Udtræk begge niveauer

Hvis du også har brug for det ydre objekt, skal du udtrække det separat og derefter destrukturere dets medlemmer i et andet trin. Det er ofte tydeligere end dyb indlejring.

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

Kombinering af indlejring og standardværdier

Standardværdier kan forekomme på ethvert niveau. Angiv en reserveværdi for et indlejret felt, der muligvis mangler, direkte dér, hvor du binder det.

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

Angiv standard for manglende underobjekter

Når et helt indlejret objekt muligvis mangler, skal du angive standardværdien {}, før du destrukturerer dets felter – ellers udløser adgang til en egenskab på undefined en fejl.

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

Indlejret array i et objekt

Du kan blande objekt- og array-mønstre. Her henter vi det første mærke fra et indlejret array på én linje.

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

Afvejning af læsbarhed

Dybt indlejrede mønstre sparer linjer, men kan skjule hensigten. Tre niveauer med standardværdier bliver svære at overskue. Hvis du som læser skal standse op, så del det op i trin.

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

Et afbalanceret eksempel

Ét niveau af indlejring med et par felter er som regel det bedste kompromis – kortfattet uden at være 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" } }))

Hurtig kontrol

Test din forståelse af indlejret destrukturering.

Besvar den i den interaktive lektion

Opsummering

Indlejret destrukturering afspejler objektets form for at nå indre værdier. Ydre nøgler er stier, ikke bindinger, så kun de inderste navne bliver variable. Angiv typen med den fulde indlejrede form eller en navngiven type, angiv standardværdien {} for manglende underobjekter, før du destrukturerer deres felter, og bland array-mønstre ind efter behov. Hold indlejringen overfladisk – del dybe mønstre op i trin af hensyn til læsbarheden.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Indlejrede destructuring-mønstre” gratis?

Ja — hele teksten til “Indlejrede destructuring-mønstre” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Indlejrede destructuring-mønstre”?

Typ dybt indlejrede destructuring-udtryk Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Indlejrede destructuring-mønstre”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy