TypeScript Academy · Lektion

Typer för objektdestrukturering

Typbestäm destrukturerade objektegenskaper utan att blanda ihop syntax för namnbyte.

Lektion 1 av 413 steg

Typer för objektdestrukturering är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Destrukturering möter typer

Objektdestrukturering plockar ut egenskaper ur ett objekt och lägger dem i lokala variabler. Med TypeScript kan man annotera den destrukturerade formen – men syntaxen innehåller en välkänd fälla. Låt oss göra rätt.

Grundläggande objektdestrukturering

Vanlig destrukturering plockar ut egenskaper efter namn. TypeScript härleder typen för varje variabel från källobjektet.

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

Annotera hela mönstret

För att annotera destrukturerade variabler placerar man typen efter hela mönstret, där objektets form beskrivs – inte efter varje variabel.

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

Destrukturera funktionsparametrar

Ett mycket vanligt mönster är att destrukturera ett parameterobjekt direkt i signaturen och annotera dess form. Inuti kroppen är name och id typade lokala variabler.

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

Fällan med kolonets betydelse

Vid destrukturering betyder ett kolon namnbyte, inte annotering. Om man skriver { name: string } skapas en variabel med namnet string som innehåller värdet från name – nästan aldrig det man vill.

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

Byt namn och typannotera tillsammans

Om både namnbyte och typangivelse krävs, byter ni namn med ett kolon och typannoterar sedan hela mönstret. Strukturannoteringen använder fortfarande de ursprungliga egenskapsnamnen.

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

Använda en namngiven typ

För allt som inte är trivialt bör ni föredra ett namngivet interface framför en inline-struktur. Det blir tydligare och kan återanvändas.

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

Destrukturera bara vissa egenskaper

Ni behöver inte extrahera varje fält. Välj det ni behöver; resten av objektets typ ignoreras för de lokala variabler ni skapar.

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" }))

Destrukturera returvärden

När en funktion returnerar ett objekt kan ni destrukturera resultatet direkt. Typerna förs från returtypen över till era lokala variabler.

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

Samla resten

Ett rest-mönster samlar återstående egenskaper i ett nytt objekt. TypeScript ger det typen från källan minus de extraherade nycklarna.

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)

Sammanfattning av inline och namngivna typer

Inline-strukturer fungerar bra för små mönster som används en gång. Använd en namngiven typ så snart strukturen växer eller upprepas. Och kom ihåg: ett kolon byter namn på en bindning, medan typannoteringen kommer efter den avslutande klammerparentesen.

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

Snabbkontroll

Testa er förståelse av typad objektdestrukturering.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Typannoteringar vid destrukturering placeras efter hela mönstret och beskriver objektstrukturen. Ett kolon inuti mönstret byter namn på en bindning, inte typannoterar den. Destrukturera funktionsparametrar och returvärden med strukturannoteringar eller namngivna typer, extrahera bara de fält ni behöver och använd ett rest-mönster för att samla resten.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Typer för objektdestrukturering” gratis?

Ja – hela texten till ”Typer för objektdestrukturering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Typer för objektdestrukturering”?

Typbestäm destrukturerade objektegenskaper utan att blanda ihop syntax för namnbyte. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Typer för objektdestrukturering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till TypeScript Academy