TypeScript Academy · Lektion

Typer til destructuring af objekter

Typ en destructuret objektegenskab uden at forveksle den med syntaks til omdøbning

Lektion 1 af 413 trin

Typer til destructuring af objekter er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 1 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.

Destrukturering møder typer

Objektdestrukturering trækker egenskaber ud af et objekt og ind i lokale variabler. Med TypeScript kan du angive typen for det destrukturerede objekt — men syntaksen har en kendt faldgrube. Lad os få det rigtigt.

Grundlæggende objektdestrukturering

Almindelig destrukturering udtrækker egenskaber efter navn. TypeScript udleder typen for hver variabel fra kildeobjektet.

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

Typeangivelse for hele mønstret

Hvis du vil angive typer for destrukturerede variabler, skal du placere typen efter hele mønstret, hvor du beskriver objektets form — ikke efter hver variabel.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Destrukturering af funktionsparametre

Et meget almindeligt mønster er at destrukturere et parameterobjekt direkte i signaturen og angive dets form. Inde i kroppen er name og id lokale variabler med typer.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

Faldgruben med forveksling af kolon

I destrukturering betyder et kolon omdøbning, ikke typeangivelse. Når du skriver { name: string }, opretter du en variabel kaldet string, som indeholder værdien fra name — næsten aldrig det, du ønsker.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Omdøbning og typeangivelse sammen

Hvis du både skal omdøbe og angive en type, skal du omdøbe med et kolon og derefter typeangive hele mønsteret. Typeangivelsen af formen bruger stadig de oprindelige egenskabsnavne.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Brug af en navngivet type

Til alt, der ikke er trivielt, bør du foretrække en navngivet grænseflade frem for en indlejret form. Den er lettere at læse og kan genbruges.

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

Destrukturering af kun nogle egenskaber

Du behøver ikke udtrække hvert felt. Vælg det, du har brug for; typen for resten af objektet ignoreres for de lokale variable, du opretter.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Destrukturering af returværdier

Når en funktion returnerer et objekt, kan du straks destrukturere resultatet. Typerne overføres fra returtypen til dine lokale variable.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Indsamling af resten

Et restmønster samler resterende egenskaber i et nyt objekt. TypeScript angiver typen som kilden minus de udtrukne nøgler.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Opsummering af indlejret kontra navngivet

Indlejrede former er fine til enkeltstående, små mønstre. Vælg en navngivet type, så snart formen vokser eller gentages. Og husk: Kolon omdøber, mens typeangivelsen kommer efter den afsluttende klammeparentes.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Hurtig kontrol

Test din forståelse af typeangivelse ved destrukturering af objekter.

Besvar den i den interaktive lektion

Opsummering

Typeangivelser ved destrukturering kommer efter hele mønsteret og beskriver objektets form. Et kolon inde i mønsteret omdøber en variabelbinding, det angiver ikke dens type. Destrukturér funktionsparametre og returværdier med typeangivelser af formen eller navngivne typer, udtræk kun de felter, du har brug for, og brug et restmønster til at samle resten.

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 “Typer til destructuring af objekter” gratis?

Ja — hele teksten til “Typer til destructuring af objekter” 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 “Typer til destructuring af objekter”?

Typ en destructuret objektegenskab uden at forveksle den med syntaks til omdøbning 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 1 af 4.

Hvor lang tid tager lektionen “Typer til destructuring af objekter”?

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