TypeScript Academy · Pelajaran

Pemanggilan Opsional dan Akses Elemen

Gunakan ?.() dan ?.[] untuk pemanggilan metode dan pengindeksan yang aman.

Pelajaran 4 dari 413 langkah

Pemanggilan Opsional dan Akses Elemen 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.

Melampaui Akses Properti

Rangkaian opsional tidak terbatas pada obj?.prop. Ada dua bentuk lainnya: pemanggilan opsional dengan ?.() dan akses elemen opsional dengan ?.[index]. Keduanya berhenti lebih awal saat menemukan nilai kosong, sama seperti akses properti.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

Pemanggilan Metode Opsional

Gunakan obj.method?.() untuk memanggil metode hanya jika metode itu ada. Jika method bernilai null atau undefined, pemanggilan dilewati dan ekspresi menghasilkan undefined.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

Menempatkan ?. di Mana

?. diletakkan tepat sebelum tanda kurung pemanggilan. obj.method?.() memeriksa metode, bukan obj. Untuk melindungi obj juga, tulis obj?.method?.().

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

Memanggil Fungsi Panggilan Balik Opsional

Salah satu penggunaan yang sangat umum adalah memanggil parameter fungsi panggilan balik yang bersifat opsional. Alih-alih melakukan pemeriksaan dengan if, tulis callback?.() untuk memanggilnya hanya jika diberikan.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

Akses Elemen Opsional

Untuk larik atau deklarasi indeks yang mungkin bernilai kosong, gunakan arr?.[index]. Jika arr bernilai kosong, akses berhenti lebih awal; jika tidak, elemennya dibaca seperti biasa.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

Akses Elemen dengan Kunci Dinamis

Akses elemen opsional juga berfungsi dengan notasi kurung siku untuk kunci dinamis atau hasil perhitungan pada objek yang mungkin bernilai kosong.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

Menggabungkan Akses Elemen dan Pemanggilan

Anda dapat mencampur bentuk-bentuk ini dengan bebas. Masuk ke dalam larik opsional, lalu panggil metode pada elemennya secara opsional—setiap ?. melindungi langkahnya sendiri.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

Rangkaian Opsional dengan Hasil Fungsi

Anda dapat meneruskan rangkaian dari apa pun yang dikembalikan fungsi. Jika fungsi menghasilkan nilai kosong, pemanggilan atau akses berikutnya berhenti lebih awal dengan aman.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

Tipe Hasil Mencakup Nilai Tidak Terdefinisi

Seperti pada rangkaian properti, pemanggilan opsional dan akses elemen menambahkan undefined ke tipe hasil. Padukan dengan ?? untuk memberikan nilai bawaan dan menghapus undefined.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

Melindungi Penangan Acara

Dalam kode antarmuka pengguna dan acara, pemanggilan opsional memungkinkan Anda memanggil penangan yang mungkin belum ditetapkan dengan elegan. Tidak perlu pemeriksaan keberadaan yang bertele-tele dan tidak akan terjadi kerusakan saat penangan tidak ada.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

Contoh Pengatur Distribusi Pengaya

Jika dirangkai: pengatur distribusi yang secara opsional memanggil pengait pengaya bernama dari registri yang mungkin jarang terisi, lalu menggunakan hasil bawaan ketika tidak ada yang menanganinya.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

Pemeriksaan Singkat

Uji pemahaman Anda tentang pemanggilan opsional dan akses elemen.

Jawab di pelajaran interaktif

Ringkasan: Pemanggilan dan Akses Opsional

Anda telah mempelajari bentuk rangkaian opsional lainnya:

obj.method?.() memanggil metode hanya jika metode itu ada.
arr?.[index] membaca elemen dengan aman dari wadah yang mungkin bernilai kosong.
Semua bentuk berhenti lebih awal dan menghasilkan undefined pada operand yang bernilai kosong.
Gabungkan dengan ?? untuk memberikan nilai bawaan pada hasil.

Kursus berikutnya: dasar-dasar readonly dan ketidakubahan.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemanggilan Opsional dan Akses Elemen” gratis?

Ya — teks lengkap “Pemanggilan Opsional dan Akses Elemen” 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 “Pemanggilan Opsional dan Akses Elemen”?

Gunakan ?.() dan ?.[] untuk pemanggilan metode dan pengindeksan yang 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 4 dari 4.

Berapa lama pelajaran “Pemanggilan Opsional dan Akses Elemen” 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