Spread i arrayer och objekt
Sprid värden och bevara samtidigt korrekta typer.
Spread i arrayer och objekt är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 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.
Sprida värden
Spread-operatorn ... kopierar element från en array eller egenskaper från ett objekt till ett nytt. TypeScript håller noggrann koll på den resulterande typen, vilket är avgörande för immutabla uppdateringar.
Array-spread
Sprid två arrayer i en ny för att sammanfoga dem. Den resulterande arrayens elementtyp är unionen av källelementtyperna.
const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]Blanda spread och literalvärden
Ni kan varva spread-element med enskilda värden. Ordningen bevaras exakt som den skrivs.
const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]Typer för spread-element
När spread-källorna har olika elementtyper blir resultatet en array av deras union. Typannotera eller låt inferensen göra arbetet.
const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)Objekt-spread
Objekt-spread kopierar egna, uppräkneliga egenskaper till ett nytt objekt. Resultattypen slår ihop källornas strukturer.
const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }Skriva över egenskaper med spread
När nycklar kolliderar vinner den sista. Sprid ett objekt och skriv sedan över specifika fält – grunden för immutabla uppdateringar.
const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37Ordningen avgör vilken som vinner
Egenskapernas företräde följer källornas ordning. Placera överskrivningar efter spread för att de ska vinna; placeras de före skriver spread över dem.
const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came lastTypen för en överskriven egenskap
Om en överskrivning ändrar en egenskaps typ återspeglar resultattypen den nya typen. TypeScript avgränsar typen till den senast förekommande varianten.
const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())Spread är en ytlig kopia
Spread kopierar ett nivådjup. Nästlade objekt delas via referens, så om ett nästlat fält ändras påverkas båda kopiorna. Använd spread även för det nästlade objektet om du vill skapa en djupare kopia.
const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared referenceSpread och readonly
Spreadning av en readonly-array eller ett readonly-objekt skapar en ny, förändringsbar kopia. Modifieraren readonly följer inte med vid spreadning, eftersom du bygger ett nytt värde.
const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4Mönstret för oföränderlig uppdatering
Spread är det idiomatiska sättet att uppdatera tillstånd utan mutering: kopiera det gamla objektet, skriv över de ändrade fälten och returnera det nya 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" }))Snabbtest
Testa din förståelse av spread-typer och företrädesregler.
Sammanfattning
Spread kopierar arrayelement eller objektegenskaper till ett nytt värde. Array-spread sammanfogar arrayer med en unionstyp för elementen; object spread sammanfogar strukturer, och vid kollisioner mellan nycklar vinner den sista förekomsten. Spread är en ytlig kopia – nästlade objekt delas fortfarande – och skapar nya, förändringsbara värden även från readonly-källor. Det är det idiomatiska mönstret för oföränderliga uppdateringar.
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
Vanliga frågor
Är lektionen ”Spread i arrayer och objekt” gratis?
Ja – hela texten till ”Spread i arrayer och objekt” 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 ”Spread i arrayer och objekt”?
Sprid värden och bevara samtidigt korrekta typer. 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 2 av 4.
Hur lång tid tar lektionen ”Spread i arrayer och objekt”?
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
- Rest-parametrar i funktioner
- Spread i arrayer och objekt
- Rest-element i tupler
- Typbestämning av variadiska funktioner