TypeScript Academy · Pelajaran

Chaining Opsional dengan ?.

Akses properti bertingkat yang mungkin bernilai null dengan aman.

Chaining Opsional dengan ?. 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.

Operator Perangkaian Opsional

Perangkaian opsional (?.) memungkinkan Anda mengakses dengan aman properti yang mungkin berada pada nilai null atau undefined. Jika nilainya kosong, seluruh ekspresi berhenti lebih awal menjadi undefined, bukan melempar galat.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Berhenti Lebih Awal pada Nilai Kosong

Ketika operan sebelum ?. adalah null atau undefined, evaluasi segera berhenti dan mengembalikan undefined. Sisa perangkaian tidak pernah dijalankan.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Merangkai Beberapa Tingkat

Anda dapat menempatkan ?. pada setiap langkah yang belum pasti dalam akses bertingkat. Tautan kosong mana pun akan menghentikan seluruh perangkaian lebih awal, sehingga melindungi Anda dari galat seperti 'tidak dapat membaca properti dari undefined'.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

Tipe Hasil Mencakup undefined

Karena perangkaian dapat menghasilkan undefined, TypeScript menambahkan undefined ke tipe hasil. Jika tipe propertinya adalah string, hasil perangkaiannya adalah string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Menangani Hasil undefined

Karena hasilnya mungkin berupa undefined, biasanya Anda memeriksanya atau memberikan nilai cadangan. Sistem tipe mengingatkan Anda untuk menangani kasus ketika nilai tidak ada.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Perbandingan dengan Perangkaian &&

Sebelum ?. tersedia, pengembang menulis perangkaian && yang panjang: a && a.b && a.b.c. Perangkaian opsional menyatakan maksud yang sama dengan jauh lebih ringkas dan dibaca dari atas ke bawah.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Mengapa ?. Lebih Baik daripada &&

Pendekatan && memperlakukan nilai apa pun yang bernilai salah (0, '', false) sebagai titik berhenti, yang dapat menjadi kesalahan. Perangkaian opsional berhenti hanya pada null atau undefined, yang biasanya memang Anda inginkan.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Perangkaian Opsional pada Larik Objek

Perangkaian opsional dapat digunakan pada akses properti apa pun. Jika digabungkan dengan akses elemen, perangkaian ini dapat menjangkau larik objek bertingkat dengan aman.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

Berhenti Lebih Awal Menghentikan Seluruh Ekspresi

Setelah suatu perangkaian berhenti lebih awal, bahkan akses properti yang ditulis setelahnya (tanpa ?.) akan dilewati. Seluruh ekspresi langsung dievaluasi menjadi undefined.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Perangkaian Opsional dengan Hasil Fungsi

Anda dapat melanjutkan perangkaian dari hasil pemanggilan fungsi. Jika fungsi mengembalikan nilai kosong, akses berikutnya akan berhenti lebih awal dengan aman.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

Contoh Konfigurasi Praktis

Perangkaian opsional sangat berguna ketika membaca konfigurasi sebagian atau respons API yang bidang bertingkatnya mungkin tidak ada. Perangkaian ini membuat akses tetap mudah dibaca dan bebas dari kegagalan.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Pemeriksaan Singkat

Ujilah pemahaman Anda tentang perangkaian opsional.

Ringkasan: Perangkaian Opsional

Anda telah mempelajari bahwa ?.:

Mengakses properti dengan aman pada nilai yang mungkin berupa null/undefined.
Berhenti lebih awal dan menjadikan seluruh ekspresi undefined ketika menemukan tautan kosong.
Menambahkan undefined ke tipe hasil.
Menyempurnakan perangkaian && dengan hanya berhenti pada nilai kosong, bukan semua nilai yang bernilai salah.

Selanjutnya, operator penggabungan nilai kosong.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Chaining Opsional dengan ?.” gratis?

Ya — teks lengkap “Chaining Opsional dengan ?.” 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 “Chaining Opsional dengan ?.”?

Akses properti bertingkat yang mungkin bernilai null dengan 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 1 dari 4.

Berapa lama pelajaran “Chaining Opsional dengan ?.” 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