TypeScript Academy · Pelajaran

Menggabungkan ?. dan ??

Padukan optional chaining dengan nilai bawaan yang sesuai.

Menggabungkan ?. dan ?? 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.

Pasangan yang Sempurna

Perantaian opsional dan penggabungan nilai null atau undefined dirancang untuk digunakan bersama. Pola obj?.value ?? fallback membaca nilai bertingkat dengan aman dan memberikan nilai default jika nilai tersebut tidak ada. Ini adalah salah satu idiom paling berguna dalam TypeScript modern.

type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);

Cara Kerja Pola Ini

Pertama, ?. mengevaluasi rantai tersebut dan menghasilkan nilainya atau undefined. Kemudian ?? memeriksa hasil itu: jika nilainya null atau undefined, fallback digunakan. Dua operator, satu ekspresi yang rapi.

type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);

Tipe Hasil

Perantaian tersebut menghasilkan T | undefined; ?? menghapus undefined dan menggabungkan tipe fallback. Dengan fallback yang sesuai, tipe akhirnya hanya T — tidak ada lagi undefined yang perlu ditangani.

type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic

Mempertahankan Nilai Falsy yang Valid

Karena ?? hanya aktif untuk nilai null atau undefined, nilai 0 yang sah dan diperoleh melalui perantaian tetap dipertahankan. fallback hanya diterapkan ketika properti tersebut benar-benar tidak ada.

type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50

Mengakses Konfigurasi Bertingkat

Untuk konfigurasi yang bertingkat dalam, rangkai beberapa langkah ?. dan akhiri dengan satu ??. Jika salah satu bagian tidak ada, keseluruhan rantai akan beralih dengan rapi ke nilai default.

type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);

Nilai Default untuk Respons API

Respons API sering kali tidak menyertakan bidang opsional. Pola gabungan ini membacanya secara hati-hati dan menggantinya dengan nilai default yang masuk akal, sehingga kode berikutnya tetap sederhana dan bebas kerusakan.

type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);

Menggabungkan dengan Hasil Metode

Anda dapat merangkai pemanggilan fungsi atau metode dan memberikan nilai default untuk hasilnya. Jika pemanggilan tersebut menghasilkan null atau undefined, fallback akan digunakan.

type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);

Menghindari Pemeriksaan yang Panjang

Sebelum operator ini tersedia, Anda harus menulis pemeriksaan null dalam beberapa baris. Idiom gabungan ini menggantikan seluruh blok dengan satu ekspresi, sehingga keterbacaan meningkat tanpa mengurangi keamanan.

type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);

Beralih ke Pencarian Lain

fallback setelah ?? juga dapat berupa pencarian berantai lainnya, sehingga Anda dapat mencoba sumber sekunder sebelum menggunakan nilai default literal terakhir.

type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);

Menggabungkan dengan Akses Elemen

Pola ini juga berfungsi dengan akses elemen array: baca elemen melalui ?.[i] dan berikan nilai default dengan ??.

type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);

Pembaca Pengaturan dalam Dunia Nyata

Jika digabungkan, hasilnya adalah pembaca pengaturan yang menelusuri lapisan opsional dengan aman dan menjamin nilai yang dapat digunakan. Inilah TypeScript untuk produksi yang akan sering Anda tulis.

type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
  return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));

Pemeriksaan Singkat

Uji pemahaman Anda tentang penggabungan ?. dan ??.

Ringkasan: Menggabungkan ?. dan ??

Anda mempelajari idiom obj?.value ?? fallback:

?. menelusuri dengan aman dan menghasilkan nilainya atau undefined.
?? memberikan nilai default hanya ketika hasilnya null atau undefined.
Tipe akhir tidak lagi menyertakan undefined, dan sering kali menjadi T yang bersih.
Nilai falsy yang valid seperti 0 tetap dipertahankan.

Selanjutnya, pemanggilan opsional dan akses elemen opsional.

type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggabungkan ?. dan ??” gratis?

Ya — teks lengkap “Menggabungkan ?. dan ??” 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 “Menggabungkan ?. dan ??”?

Padukan optional chaining dengan nilai bawaan yang sesuai. 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 “Menggabungkan ?. dan ??” 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