TypeScript Academy · Pelajaran

Nilai Bawaan dalam Destrukturisasi

Gabungkan nilai bawaan dengan anotasi jenis secara aman.

Nilai Bawaan dalam Destrukturisasi adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengisi Bagian yang Kosong

Nilai bawaan destrukturisasi menyediakan nilai pengganti ketika properti atau elemen tidak ada atau bernilai undefined. Jika dipadukan dengan inferensi TypeScript, fitur ini membuat konfigurasi opsional menjadi praktis dan aman.

Nilai Bawaan dalam Destrukturisasi Objek

Tulis = value setelah pengikatan untuk memberinya nilai pengganti. Jika properti tidak ada atau bernilai undefined, nilai bawaan akan digunakan.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Nilai Bawaan dengan Properti Opsional

Nilai bawaan berpadu secara alami dengan properti opsional (?). Nilai bawaan menghilangkan kemungkinan undefined, sehingga variabel yang dihasilkan memiliki tipe nonopsional.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Nilai Bawaan dan Tipe yang Disimpulkan

Jika Anda tidak memberikan anotasi, TypeScript menyimpulkan tipe variabel dari nilai bawaannya. Di sini, 0 menjadikan count bertipe number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Hanya undefined yang Memicu Nilai Bawaan

Hal yang perlu diperhatikan: nilai bawaan hanya diterapkan untuk undefined, tidak pernah untuk nilai falsy lain seperti 0, "", atau null. Nilai-nilai tersebut diteruskan tanpa perubahan.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Nilai Bawaan dalam Parameter Fungsi

Nilai bawaan pada parameter yang didestrukturisasi membuat opsi opsional mudah digunakan. Setiap bidang dapat memiliki nilai penggantinya sendiri langsung di dalam tanda tangan fungsi.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

Memberi Nilai Bawaan pada Seluruh Parameter

Agar pemanggil dapat menghilangkan seluruh objek argumen, berikan parameter itu sendiri nilai bawaan berupa {}. Tanpa ini, pemanggilan tanpa argumen akan menimbulkan galat.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Nilai Bawaan Bersamaan dengan Penggantian Nama

Anda dapat mengganti nama dan memberikan nilai bawaan dalam satu pengikatan: ganti nama terlebih dahulu, lalu tambahkan nilai bawaan setelah nama baru.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Nilai Bawaan Terhitung

Nilai bawaan dapat berupa ekspresi apa pun, bahkan ekspresi yang merujuk pada pengikatan sebelumnya. Ekspresi tersebut dievaluasi secara lambat — hanya ketika nilainya benar-benar tidak ada.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Ringkasan Nilai Bawaan Larik

Nilai bawaan juga berfungsi dalam destrukturisasi larik, diterapkan pada setiap posisi ketika elemen tidak ada atau bernilai undefined.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Saat Nilai Bawaan Sangat Berguna

Nilai bawaan ideal untuk objek opsi: pemanggil hanya menentukan hal yang diperlukan, lalu fungsi mengisi nilai pengganti yang sesuai. Nilai bawaan juga menghapus undefined dari tipe yang disimpulkan sehingga isi fungsi menjadi lebih sederhana.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

Pemeriksaan Cepat

Uji pemahaman Anda tentang nilai bawaan destrukturisasi.

Ringkasan

Nilai bawaan destrukturisasi (= fallback) hanya diterapkan ketika nilai tidak ada atau bernilai undefined — tidak pernah untuk nilai falsy lainnya. Nilai bawaan menghapus undefined dari tipe properti opsional, dapat disimpulkan atau diberi anotasi, mendukung penggantian nama, dan dapat merujuk pada pengikatan sebelumnya. Untuk objek opsi, berikan parameter nilai bawaan berupa {} agar pemanggil dapat menghilangkannya sepenuhnya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Nilai Bawaan dalam Destrukturisasi” gratis?

Ya — teks lengkap “Nilai Bawaan dalam Destrukturisasi” 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 “Nilai Bawaan dalam Destrukturisasi”?

Gabungkan nilai bawaan dengan anotasi jenis secara aman. 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 3 dari 4.

Berapa lama pelajaran “Nilai Bawaan dalam Destrukturisasi” 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