FluentStack

Optional Fields

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 6: TypeScriptIntermediate50 menitBahasa Indonesia

Optional Fields

Memodelkan data yang boleh tidak lengkap dan membaca optional property dengan aman.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menulis optional property dengan tanda tanya
  • Memahami kenapa optional property bisa bernilai undefined
  • Menggunakan fallback atau optional chaining saat membaca data
TypeScriptOptional FieldsUI Data

Isi lesson

6 blok
  1. 1.
    Tidak semua data selalu lengkapBelum selesaiWajib
  2. 2.
    Profile dengan bio opsionalBelum selesaiWajib
  3. 3.
    Jangan langsung memanggil method dari optional valueBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Tidak semua data selalu lengkap

Wajib

Di app nyata, sebagian data boleh kosong. Profile user mungkin belum punya bio. Product mungkin belum punya discount label. Lesson mungkin belum punya estimated time.

TypeScript menulis property opsional dengan tanda `?`. Artinya property itu boleh ada, boleh tidak. Saat kamu membacanya, TypeScript akan meminta kamu memperlakukan value itu sebagai sesuatu yang mungkin `undefined`.

Bagian ini memengaruhi progres lesson.

Profile dengan bio opsional

Wajib
ts
type ProfileCard = {
  name: string;
  bio?: string;
};

function getBioLabel(profile: ProfileCard): string {
  return profile.bio ?? "Bio belum diisi";
}

`bio?: string` berarti bio boleh tidak ada. Operator `??` memberi fallback saat bio bernilai null atau undefined.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan langsung memanggil method dari optional value

Jika `bio` opsional, `profile.bio.toUpperCase()` bisa error karena bio mungkin undefined. Gunakan fallback, optional chaining, atau pengecekan if sebelum memakai method string.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Model optional profile fields

Latihan membuat optional fields dan membaca value opsional dengan fallback.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis4 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa arti `bio?: string` pada object type?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib
  • Optional property ditulis dengan tanda `?`.
  • Optional property bisa bernilai undefined saat dibaca.
  • Gunakan fallback, optional chaining, atau if check sebelum memakai value opsional.
  • Optional fields cocok untuk data UI yang belum tentu lengkap.
  • Berikutnya, Uji Kompetensi akan mengecek core types secara utuh.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tidak semua data selalu lengkap.

Memuat progresReview module