TypeScript Academy · Lekcja

Typy destrukturyzacji obiektów

Typuj destrukturyzowane właściwości obiektów, nie myląc ich ze składnią zmiany nazwy

Typy destrukturyzacji obiektów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 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 i typy

Destrukturyzacja obiektu wyodrębnia właściwości obiektu do zmiennych lokalnych. W TypeScript można opisać typ destrukturyzowanej struktury — składnia kryje jednak znaną pułapkę. Warto poznać właściwy zapis.

Podstawowa destrukturyzacja obiektu

Zwykła destrukturyzacja wyodrębnia właściwości na podstawie ich nazw. TypeScript wywnioskuje typ każdej zmiennej z obiektu źródłowego.

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

Typowanie całego wzorca

Aby określić typ destrukturyzowanych zmiennych, należy umieścić typ za całym wzorcem, opisując strukturę obiektu — a nie za każdą zmienną.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Destrukturyzacja parametrów funkcji

To bardzo częsty wzorzec: obiekt parametru jest destrukturyzowany bezpośrednio w sygnaturze, a jego struktura zostaje opisana typem. W treści funkcji name i id są zmiennymi lokalnymi o określonych typach.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

Pułapka mylenia dwukropka

W destrukturyzacji dwukropek oznacza zmianę nazwy, a nie określenie typu. Zapis { name: string } tworzy zmienną o nazwie string, przechowującą wartość name — niemal nigdy nie jest to zamierzony efekt.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Jednoczesna zmiana nazwy i adnotacja

Jeśli trzeba jednocześnie zmienić nazwę i określić typ, należy zmienić nazwę za pomocą dwukropka, a następnie dodać adnotację do całego wzorca. Adnotacja kształtu nadal używa oryginalnych nazw właściwości.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Używanie nazwanego typu

W przypadku wszystkiego, co nie jest trywialne, lepiej użyć nazwanej deklaracji interface niż kształtu zapisanego bezpośrednio. Taki zapis jest czytelniejszy i można go ponownie wykorzystać.

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

Destrukturyzacja tylko niektórych właściwości

Nie trzeba wyodrębniać każdego pola. Należy wybrać tylko potrzebne pola; typ pozostałej części obiektu jest ignorowany dla tworzonych zmiennych lokalnych.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Destrukturyzacja wartości zwracanych

Gdy funkcja zwraca obiekt, można od razu poddać wynik destrukturyzacji. Typy są przekazywane z typu zwracanego do zmiennych lokalnych.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Gromadzenie pozostałych elementów

Wzorzec rest gromadzi pozostałe właściwości w nowym obiekcie. TypeScript określa jego typ jako typ źródłowy pomniejszony o wyodrębnione klucze.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Podsumowanie: zapis bezpośredni a nazwany

Bezpośrednio zapisane kształty sprawdzają się w jednorazowych, małych wzorcach. Po rozrośnięciu się kształtu lub jego powtórzeniu należy użyć nazwanego typu. Należy też pamiętać: dwukropek zmienia nazwę, a adnotacja pojawia się po zamykającej klamrze.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat typowanej destrukturyzacji obiektów.

Podsumowanie

Adnotacje typów w destrukturyzacji umieszcza się za całym wzorcem i opisują one kształt obiektu. Dwukropek wewnątrz wzorca zmienia nazwę wiązania, a nie dodaje do niego adnotacji. Parametry i wartości zwracane przez funkcje można poddawać destrukturyzacji za pomocą adnotacji kształtu lub nazwanych typów, wyodrębniać tylko potrzebne pola oraz używać wzorca rest do gromadzenia pozostałych.

Często zadawane pytania

Czy lekcja „Typy destrukturyzacji obiektów” jest bezpłatna?

Tak — pełny tekst „Typy destrukturyzacji obiektów” 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 „Typy destrukturyzacji obiektów”?

Typuj destrukturyzowane właściwości obiektów, nie myląc ich ze składnią zmiany nazwy Ć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 1 z 4.

Ile czasu zajmuje lekcja „Typy destrukturyzacji obiektów”?

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