TypeScript Academy · Lekcja

Spread w tablicach i obiektach

Rozpraszaj wartości, zachowując dokładne typy

Spread w tablicach i obiektach to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Rozpraszanie wartości

Operator spread ... kopiuje elementy tablicy lub właściwości obiektu do nowej tablicy albo obiektu. TypeScript precyzyjnie śledzi wynikowy typ, co ma kluczowe znaczenie przy niezmiennych aktualizacjach.

Rozpraszanie tablic

Można rozproszyć dwie tablice w nowej tablicy, aby je połączyć. Typ elementów wyniku jest sumą typów elementów obu tablic źródłowych.

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

Łączenie rozpraszania z literałami

Elementy rozproszone można przeplatać pojedynczymi wartościami. Kolejność jest zachowywana dokładnie tak, jak zapisano.

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

Typy elementów rozpraszanych

Gdy źródła rozpraszania mają różne typy elementów, wynikiem jest tablica zawierająca ich sumę typów. Typ można określić za pomocą adnotacji lub pozostawić to wnioskowaniu.

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

Rozpraszanie obiektów

Rozpraszanie obiektu kopiuje jego własne wyliczalne właściwości do nowego obiektu. Typ wynikowy łączy kształty źródłowe.

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

Nadpisywanie właściwości podczas rozpraszania

Gdy klucze się powtarzają, wygrywa ostatni. Należy rozproszyć obiekt, a następnie nadpisać konkretne pola — to podstawa niezmiennych aktualizacji.

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

Kolejność decyduje o zwycięzcy

Pierwszeństwo właściwości wynika z kolejności źródeł. Nadpisywane wartości należy umieścić po rozproszeniu, aby zwyciężyły; umieszczone przed nim zostaną nadpisane przez rozpraszany obiekt.

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

Typ nadpisanej właściwości

Jeśli nadpisanie zmienia typ właściwości, typ wynikowy odzwierciedla nowy typ. TypeScript zawęża go do ostatniego wystąpienia.

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

Spread to płytka kopia

Spread kopiuje jedną warstwę w głąb. Zagnieżdżone obiekty są współdzielone przez referencję, więc modyfikacja zagnieżdżonego pola wpływa na obie kopie. Aby uzyskać głębszą kopię, należy wykonać spread również na zagnieżdżonym obiekcie.

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

Spread i readonly

Zastosowanie spread do tablicy lub obiektu readonly tworzy nową, mutowalną kopię. Modyfikator readonly nie jest przenoszony przez spread, ponieważ tworzona jest nowa wartość.

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

Wzorzec aktualizacji bez mutacji

Spread to idiomatyczny sposób aktualizowania stanu bez mutacji: należy skopiować stary obiekt, nadpisać zmieniane pola i zwrócić nowy obiekt.

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

Szybkie sprawdzenie

Sprawdź swoje rozumienie typów spread i pierwszeństwa.

Podsumowanie

Spread kopiuje elementy tablicy lub właściwości obiektu do nowej wartości. Spread tablic łączy je, używając typu unii elementów; spread obiektów scala struktury, a w przypadku kolizji kluczy wygrywa ostatnie wystąpienie. Spread tworzy płytką kopię — zagnieżdżone obiekty pozostają współdzielone — oraz tworzy nowe, mutowalne wartości nawet ze źródeł readonly. Jest idiomatycznym wzorcem aktualizacji bez mutacji.

Często zadawane pytania

Czy lekcja „Spread w tablicach i obiektach” jest bezpłatna?

Tak — pełny tekst „Spread w tablicach i obiektach” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Spread w tablicach i obiektach”?

Rozpraszaj wartości, zachowując dokładne typy Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Spread w tablicach i obiektach”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy