TypeScript Academy · Lekcja

Destrukturyzacja tablic i krotek

Destrukturyzuj tablice i krotki z poprawnymi typami elementów

Destrukturyzacja tablic i krotek 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.

Destrukturyzacja pozycyjna

Destrukturyzacja tablic wiąże zmienne na podstawie pozycji, a nie nazw. W przypadku krotek każda pozycja ma określony typ, co zapewnia precyzyjne wyodrębnianie w ustalonej kolejności.

Podstawowa destrukturyzacja tablic

Kwadratowe nawiasy po lewej stronie wyodrębniają elementy zgodnie z kolejnością indeksów. W zwykłej tablicy każde wiązanie ma typ elementu tej tablicy.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Dodawanie adnotacji do wzorca krotki

Adnotację dodaje się, podając typ krotki po wzorcu wiązań. Każda pozycja otrzymuje własny typ — tutaj najpierw number, a następnie string.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Typy zależne od pozycji

W krotce typ na każdym indeksie jest stały. Pierwsze wiązanie ma typ number, a drugie string — zamiana wartości miejscami spowodowałaby błąd typu.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Pomijanie elementów za pomocą przecinków

Aby pominąć niepotrzebną pozycję, należy zostawić lukę w postaci pustego miejsca między przecinkami. Typ pominiętego elementu jest po prostu ignorowany.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Destrukturyzacja z elementem rest

Element rest gromadzi pozostałe elementy w tablicy. W przypadku krotki jego typ odzwierciedla pozostałe pozycje.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Typ rest na podstawie krotki

Podczas destrukturyzacji krotki z elementem rest TypeScript wywnioskuje dla zmiennej rest typ krotki z pozostałych elementów, zachowując ich typy.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Zamiana zmiennych

Destrukturyzacja tablic umożliwia ciekawą sztuczkę: zamianę dwóch wartości bez zmiennej tymczasowej. Aby zamiana przeszła sprawdzanie typów, typy muszą być zgodne.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Destrukturyzacja zwracanych wartości w funkcjach

Funkcje zwracające krotki doskonale współpracują z destrukturyzacją — wzorzec React useState jest dokładnie takim przypadkiem.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Wartości domyślne we wzorcach tablic

Wartość domyślną można podać dla pozycji, która może mieć wartość undefined. Wartość domyślna jest używana tylko wtedy, gdy elementu brakuje lub ma wartość undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Zagnieżdżona destrukturyzacja tablic

Tablice można poddawać destrukturyzacji wewnątrz innych tablic w jednej instrukcji. Typy zagnieżdżają się odpowiednio, ale w przypadku głębokich struktur należy pamiętać o czytelności.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat destrukturyzacji tablic i krotek.

Podsumowanie

Destrukturyzacja tablic wiąże elementy na podstawie pozycji; typ krotki należy umieścić po wzorcu, aby każdy indeks otrzymał własny typ. Elementy można pomijać za pomocą pustych miejsc między przecinkami, pozostałe gromadzić za pomocą elementu rest (który zachowuje typ krotki pozostałych pozycji), a dla pozycji, których może brakować, podawać wartości domyślne. Zwracanie krotek w połączeniu z destrukturyzacją umożliwia tworzenie wzorców takich jak useState.

Często zadawane pytania

Czy lekcja „Destrukturyzacja tablic i krotek” jest bezpłatna?

Tak — pełny tekst „Destrukturyzacja tablic i krotek” 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 „Destrukturyzacja tablic i krotek”?

Destrukturyzuj tablice i krotki z poprawnymi typami elementów Ć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 „Destrukturyzacja tablic i krotek”?

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