TypeScript Academy · Pelajaran

Pola Destrukturisasi Bertingkat

Tentukan jenis ekspresi destrukturisasi yang bertingkat secara mendalam.

Pola Destrukturisasi Bertingkat adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Mengakses Data Bersarang

Destrukturisasi bersarang mengekstrak nilai dari objek di dalam objek dalam satu pernyataan. Penulisannya ringkas, tetapi berinteraksi dengan tipe dengan cara yang perlu dipahami — dan dapat mengurangi keterbacaan jika digunakan secara berlebihan.

Mendestrukturisasi Properti Bersarang

Samakan bentuk objek di sisi kiri. Untuk mengakses data.user.name, letakkan pola bersarang di bawah user.

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

Nama Luar Tidak Diikat

Jebakan yang perlu diperhatikan: dalam { user: { name } }, user hanya merupakan jalur, bukan pengikatan. Anda mendapatkan name, tetapi setelahnya tidak ada variabel bernama user.

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

Menentukan Tipe Destrukturisasi Bersarang

Berikan anotasi dengan bentuk bersarang lengkap setelah pola. Setiap tingkat mencerminkan struktur objek.

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

Tipe Bernama Lebih Mudah Dibaca

Bentuk bersarang sebaris dengan cepat menjadi sulit dikelola. Antarmuka bernama menjaga anotasi tetap rapi sekaligus memungkinkan ekstraksi bersarang.

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

Mengekstrak Kedua Tingkat

Jika Anda juga memerlukan objek luarnya, ekstrak objek tersebut secara terpisah, lalu destrukturisasi anggotanya pada langkah berikutnya. Cara ini sering kali lebih jelas daripada menggunakan sarang yang dalam.

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

Menggabungkan Persarangan dengan Nilai Bawaan

Nilai bawaan dapat muncul pada tingkat mana pun. Berikan nilai pengganti untuk bidang bersarang yang mungkin tidak ada tepat di tempat Anda mengikatnya.

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

Memberi Nilai Bawaan pada Subobjek yang Tidak Ada

Ketika seluruh objek bersarang mungkin tidak ada, berikan nilai bawaan {} sebelum mendestrukturisasi bidangnya — jika tidak, mengakses properti dari undefined akan menimbulkan galat.

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

Larik Bersarang di Dalam Objek

Anda dapat mencampur pola objek dan larik. Di sini, kita mengambil tag pertama dari larik bersarang dalam satu baris.

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

Pertimbangan Keterbacaan

Pola bersarang yang dalam menghemat baris, tetapi dapat mengaburkan maksud kode. Tiga tingkat kedalaman dengan nilai bawaan akan sulit dipindai. Jika pembaca harus berhenti sejenak, pecahlah menjadi beberapa langkah.

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

Contoh yang Seimbang

Satu tingkat persarangan dengan beberapa bidang biasanya merupakan titik yang paling seimbang — ringkas tanpa menjadi membingungkan.

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

Pemeriksaan Cepat

Uji pemahaman Anda tentang destrukturisasi bersarang.

Ringkasan

Destrukturisasi bersarang mencerminkan bentuk objek untuk mengakses nilai bagian dalam; kunci luar merupakan jalur, bukan pengikatan, sehingga hanya nama paling dalam yang menjadi variabel. Berikan anotasi dengan bentuk bersarang lengkap atau tipe bernama, berikan nilai bawaan {} pada subobjek yang tidak ada sebelum mendestrukturisasi bidangnya, dan campurkan pola larik sesuai kebutuhan. Jaga agar persarangan tetap dangkal — pecah pola yang dalam menjadi beberapa langkah agar mudah dibaca.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Destrukturisasi Bertingkat” gratis?

Ya — teks lengkap “Pola Destrukturisasi Bertingkat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pola Destrukturisasi Bertingkat”?

Tentukan jenis ekspresi destrukturisasi yang bertingkat secara mendalam. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pola Destrukturisasi Bertingkat” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy