FluentStack

Narrowing

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

Narrowing

Mengecek value sebelum memakainya agar TypeScript tahu bentuk value yang sedang aman digunakan.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami narrowing sebagai pengecekan sebelum memakai value
  • Menangani value seperti string atau null dengan aman
  • Menghindari pemaksaan type saat pengecekan sederhana cukup
TypeScriptNarrowingSafe Access

Isi lesson

5 blok
  1. 1.
    TypeScript perlu bukti sebelum percayaBelum selesaiWajib
  2. 2.
    Contoh yang perlu narrowingBelum selesaiWajib
  3. 3.
    Narrowing dengan early returnBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

TypeScript perlu bukti sebelum percaya

Wajib

Jika sebuah value bisa punya lebih dari satu kemungkinan type, TypeScript tidak akan langsung mengizinkan kamu memakai method yang hanya aman untuk salah satunya.

Narrowing berarti memberi bukti lewat pengecekan. Setelah kamu mengecek `if (value === null)`, `typeof value === "string"`, atau status tertentu, TypeScript bisa menyempitkan kemungkinan type di branch berikutnya.

Bagian ini memengaruhi progres lesson.

Contoh yang perlu narrowing

Wajib
ts
function formatName(name: string | null): string {
  return name.toUpperCase();
}

Kode ini bermasalah karena name mungkin null. TypeScript meminta kamu mengecek null sebelum memakai method string.

Bagian ini memengaruhi progres lesson.

Narrowing dengan early return

Wajib
ts
function formatName(name: string | null): string {
  if (name === null) {
    return "Nama belum tersedia";
  }

  return name.toUpperCase();
}

Setelah branch null dikembalikan lebih awal, TypeScript tahu bahwa di baris terakhir name adalah string.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Narrow nullable profile name

Latihan mengecek string atau null sebelum memakai method string.

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.

5 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Narrowing adalah proses menyempitkan kemungkinan type dengan pengecekan.
  • `if`, `typeof`, dan pengecekan literal value sering cukup untuk narrowing dasar.
  • Early return membuat branch aman lebih mudah dibaca.
  • Narrowing lebih sehat daripada langsung memakai `as` untuk memaksa type.
  • Berikutnya, kamu akan memakai discriminated union untuk memodelkan UI state.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: TypeScript perlu bukti sebelum percaya.