Type Narrowing — CompileDaily Study

Penjelasan

Type narrowing adalah proses TypeScript "mempersempit" tipe union jadi tipe yang lebih spesifik di dalam blok kode tertentu, berdasarkan pengecekan runtime seperti typeof (untuk tipe primitif), instanceof (untuk instance class), atau operator in (mengecek keberadaan properti) — biasa dipakai bareng discriminated union (union dari beberapa interface yang punya satu properti "penanda" umum).

Contoh Konsep

function proses(nilai: string | number): string {
    if (typeof nilai === "string") {
        return nilai.toUpperCase(); // TypeScript tahu ini pasti string di sini
    }
    return nilai.toFixed(2); // TypeScript tahu ini pasti number di sini
}

interface Lingkaran { jenis: "lingkaran"; radius: number; }
interface Persegi { jenis: "persegi"; sisi: number; }
type Bentuk = Lingkaran | Persegi; // discriminated union, ditandai properti jenis

function hitungLuas(bentuk: Bentuk): number {
    if (bentuk.jenis === "lingkaran") {
        return Math.PI * bentuk.radius ** 2;
    }
    return bentuk.sisi ** 2;
}

Praktikum

Buat fungsi deskripsi(nilai: string | boolean): string yang mengembalikan `${nilai.length} karakter` kalau string, atau `boolean: ${nilai}` kalau boolean, menggunakan typeof untuk narrowing.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Discriminated union (union interface dengan satu properti penanda yang sama, mis. jenis) adalah pola paling direkomendasikan untuk union kompleks — TypeScript bisa mempersempit tipe secara otomatis dan akurat begitu properti penanda itu dicek dengan if/switch.