TypeScript Academy · Lekcja

Zagnieżdżone wzorce destrukturyzacji

Typuj głęboko zagnieżdżone wyrażenia destrukturyzacji

Zagnieżdżone wzorce destrukturyzacji to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 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.

Sięganie do zagnieżdżonych danych

Zagnieżdżona destrukturyzacja wyodrębnia wartości z obiektów znajdujących się wewnątrz innych obiektów w jednej instrukcji. Jest zwięzła, ale wpływa na typy w sposób, który warto zrozumieć — a nadużywana może pogorszyć czytelność.

Destrukturyzacja zagnieżdżonej właściwości

Lewa strona powinna odzwierciedlać kształt obiektu. Aby sięgnąć do data.user.name, należy zagnieździć wzorzec pod user.

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

Zewnętrzna nazwa nie jest wiązana

To subtelna pułapka: w { user: { name } } user jest tylko ścieżką, a nie wiązaniem. Otrzymuje się name, ale później nie istnieje żadna zmienna o nazwie user.

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

Typowanie zagnieżdżonej destrukturyzacji

Adnotację należy umieścić po wzorcu i opisać nią pełny zagnieżdżony kształt. Każdy poziom odzwierciedla strukturę obiektu.

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

Nazwane typy są czytelniejsze

Bezpośrednio zapisane zagnieżdżone kształty szybko stają się nieporęczne. Nazwana deklaracja interface utrzymuje adnotację w czystości, nadal umożliwiając zagnieżdżone wyodrębnianie.

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

Wyodrębnianie obu poziomów

Jeśli potrzebny jest również zewnętrzny obiekt, należy wyodrębnić go osobno, a następnie w kolejnym kroku poddać destrukturyzacji jego składowe. Często jest to czytelniejsze niż głębokie zagnieżdżanie.

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

Łączenie zagnieżdżania z wartościami domyślnymi

Wartości domyślne mogą pojawić się na dowolnym poziomie. Wartość zastępczą dla potencjalnie brakującego zagnieżdżonego pola należy podać bezpośrednio w miejscu jego wiązania.

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

Wartość domyślna dla brakujących obiektów zagnieżdżonych

Gdy całego zagnieżdżonego obiektu może brakować, przed destrukturyzacją jego pól należy nadać mu wartość domyślną {} — w przeciwnym razie dostęp do właściwości obiektu undefined spowoduje błąd.

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

Zagnieżdżona tablica wewnątrz obiektu

Można łączyć wzorce obiektów i tablic. Tutaj w jednej linii pobieramy pierwszy tag z zagnieżdżonej tablicy.

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

Kompromisy związane z czytelnością

Głębokie zagnieżdżone wzorce oszczędzają wiersze, ale mogą zaciemniać intencję kodu. Trzy poziomy zagnieżdżenia wraz z wartościami domyślnymi stają się trudne do przeanalizowania. Jeśli czytelnik musi się zatrzymać, należy podzielić zapis na kroki.

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

Wyważony przykład

Jeden poziom zagnieżdżenia z kilkoma polami to zazwyczaj najlepszy kompromis — zwięzły zapis bez utraty przejrzystości.

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat zagnieżdżonej destrukturyzacji.

Podsumowanie

Zagnieżdżona destrukturyzacja odzwierciedla kształt obiektu, aby dotrzeć do wewnętrznych wartości; zewnętrzne klucze są ścieżkami, a nie wiązaniami, więc zmiennymi stają się tylko nazwy najbardziej wewnętrzne. Należy dodać adnotację pełnego zagnieżdżonego kształtu lub nazwanego typu, przed destrukturyzacją pól brakujących obiektów zagnieżdżonych nadać im wartość domyślną {} oraz w razie potrzeby łączyć wzorce z tablicami. Zagnieżdżenie powinno być płytkie — dla zachowania czytelności głębokie wzorce należy dzielić na kroki.

Często zadawane pytania

Czy lekcja „Zagnieżdżone wzorce destrukturyzacji” jest bezpłatna?

Tak — pełny tekst „Zagnieżdżone wzorce destrukturyzacji” 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 „Zagnieżdżone wzorce destrukturyzacji”?

Typuj głęboko zagnieżdżone wyrażenia destrukturyzacji Ć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 4 z 4.

Ile czasu zajmuje lekcja „Zagnieżdżone wzorce destrukturyzacji”?

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