TypeScript Academy · Pelajaran

Jenis Destrukturisasi Objek

Tentukan jenis properti objek yang didestrukturisasi tanpa keliru dengan sintaks penggantian nama.

Jenis Destrukturisasi Objek adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Destrukturisasi dan Tipe

Destrukturisasi objek mengambil properti dari objek dan memasukkannya ke dalam variabel lokal. Dengan TypeScript, Anda dapat memberi anotasi pada bentuk objek yang didestrukturisasi—tetapi sintaksnya memiliki jebakan yang terkenal. Mari kita melakukannya dengan benar.

Destrukturisasi Objek Dasar

Destrukturisasi biasa mengambil properti berdasarkan nama. TypeScript menyimpulkan tipe setiap variabel dari objek sumber.

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

Memberi Anotasi pada Seluruh Pola

Untuk memberi anotasi pada variabel yang didestrukturisasi, letakkan tipe setelah seluruh pola dengan menjelaskan bentuk objek—bukan setelah setiap variabel.

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

Mendestrukturisasi Parameter Fungsi

Pola yang sangat umum: destrukturisasi objek parameter langsung dalam deklarasi fungsi, lalu beri anotasi pada bentuknya. Di dalam isi fungsi, name dan id merupakan variabel lokal yang memiliki tipe.

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

Jebakan Kebingungan Titik Dua

Dalam destrukturisasi, titik dua berarti mengganti nama, bukan memberi anotasi. Menulis { name: string } membuat variabel bernama string yang menyimpan nilai name—hampir tidak pernah sesuai dengan keinginan Anda.

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

Mengganti Nama dan Memberi Anotasi Bersamaan

Jika Anda harus mengganti nama sekaligus menentukan tipe, ganti nama dengan titik dua, lalu beri anotasi pada seluruh pola. Anotasi bentuk tetap menggunakan nama properti asli.

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

Menggunakan Tipe Bernama

Untuk bentuk apa pun yang tidak sederhana, utamakan antarmuka bernama daripada bentuk sebaris. Kode menjadi lebih mudah dibaca dan dapat digunakan kembali.

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

Mendestrukturisasi Hanya Beberapa Properti

Anda tidak harus mengekstrak setiap bidang. Pilih yang Anda perlukan; tipe objek lainnya diabaikan untuk variabel lokal yang Anda buat.

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" }))

Mendestrukturisasi Nilai Kembalian

Ketika sebuah fungsi mengembalikan objek, Anda dapat langsung mendestrukturisasi hasilnya. Tipe mengalir dari tipe kembalian ke variabel lokal Anda.

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

Mengumpulkan Sisanya

Pola sisa mengumpulkan properti yang tersisa ke dalam objek baru. TypeScript memberinya tipe sumber dikurangi kunci yang diekstrak.

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)

Ringkasan Bentuk Sebaris dan Bernama

Bentuk sebaris cocok untuk pola kecil yang hanya digunakan sekali. Gunakan tipe bernama segera setelah bentuknya membesar atau berulang. Ingat: titik dua mengganti nama, sedangkan anotasi diletakkan setelah kurung kurawal penutup.

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

Pemeriksaan Cepat

Uji pemahaman Anda tentang destrukturisasi objek bertipe.

Ringkasan

Anotasi tipe pada destrukturisasi diletakkan setelah seluruh pola dan menjelaskan bentuk objek. Titik dua di dalam pola mengganti nama suatu pengikatan, bukan memberinya anotasi. Destrukturisasi parameter fungsi dan nilai kembalian dengan anotasi bentuk atau tipe bernama, ekstrak hanya bidang yang Anda perlukan, dan gunakan pola sisa untuk mengumpulkan sisanya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Jenis Destrukturisasi Objek” gratis?

Ya — teks lengkap “Jenis Destrukturisasi Objek” 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 “Jenis Destrukturisasi Objek”?

Tentukan jenis properti objek yang didestrukturisasi tanpa keliru dengan sintaks penggantian nama. 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 1 dari 4.

Berapa lama pelajaran “Jenis Destrukturisasi Objek” 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