TypeScript Academy · leksjon

Spread i arrayer og objekter

Spre verdier samtidig som du bevarer nøyaktige typer.

Leksjon 2 av 413 trinn

Spread i arrayer og objekter er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 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.

Spread av verdier

Spread-operatoren ... kopierer elementer fra en array eller egenskaper fra et objekt til et nytt objekt eller en ny array. TypeScript følger den resulterende typen presist, noe som er viktig for uforanderlige oppdateringer.

Array-spread

Spre to arrayer inn i en ny array for å slå dem sammen. Den resulterende elementtypen er unionen av elementtypene fra begge kildene.

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

Blande spread og litteraler

Du kan blande spread-elementer med enkeltverdier. Rekkefølgen bevares nøyaktig slik den er skrevet.

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

Typene til spread-elementer

Når spread-kildene har ulike elementtyper, blir resultatet en array av unionen av disse typene. Annoter, eller la inferens gjøre arbeidet.

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

Objekt-spread

Objekt-spread kopierer egne, enumerable egenskaper til et nytt objekt. Resultattypen slår sammen kildestrukturene.

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

Spread overskriver egenskaper

Når nøkler kolliderer, vinner den siste. Spre et objekt først, og overskriv deretter bestemte felt – grunnlaget for uforanderlige oppdateringer.

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

Rekkefølgen avgjør vinneren

Hvilken egenskap som får forrang, følger kildenes rekkefølge. Plasser overskrivinger etter spread for at de skal vinne; plasserer du dem før, overskriver spread dem.

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

Typen til en overskrevet egenskap

Hvis en overskriving endrer typen til en egenskap, gjenspeiler resultattypen den nye typen. TypeScript snevrer inn til den sist forekommende typen.

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

Spread er en grunn kopi

Spread kopierer bare det ytterste nivået. Nestede objekter deles ved referanse, så en endring i et nestet felt påvirker begge kopiene. Bruk også spread på det nestede objektet for å få en dypere kopi.

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

Spread og readonly

Spread av en readonly-array eller et readonly-objekt oppretter en ny, muterbar kopi. Modifikatoren readonly videreføres ikke gjennom spread, siden du oppretter en ny verdi.

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

Mønster for uforanderlige oppdateringer

Spread er den idiomatiske måten å oppdatere tilstand uten mutasjoner på: kopier det gamle objektet, overskriv feltene som er endret, og returner det nye objektet.

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

Rask kontroll

Test forståelsen din av spread-typer og presedens.

Besvar den i den interaktive leksjonen

Oppsummering

Spread kopierer array-elementer eller egenskaper fra et objekt til en ny verdi. Spread av arrayer slår sammen arrayer med en unionstype for elementene; spread av objekter slår sammen strukturer, og ved kollisjoner mellom nøkler vinner den siste forekomsten. Spread er en grunn kopi – nestede objekter deles fortsatt – og oppretter nye, muterbare verdier, også fra readonly-kilder. Det er det idiomatiske mønsteret for uforanderlige oppdateringer.

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 «Spread i arrayer og objekter» gratis?

Ja – hele teksten i «Spread i arrayer og objekter» 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 «Spread i arrayer og objekter»?

Spre verdier samtidig som du bevarer nøyaktige typer. 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 2 av 4.

Hvor lang tid tar leksjonen «Spread i arrayer og objekter»?

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