Switch Case di TypeScript: Narrowing dan Exhaustive Check

Pernyataan switch di TypeScript adalah switch milik JavaScript dengan pengecekan tipe. Ia membandingkan sebuah nilai dengan setiap case memakai ===, menjalankan cabang yang cocok, dan berhenti di break atau return. TypeScript mempersempit nilai yang di-switch di dalam setiap case dan bisa mengecek bahwa setiap nilai yang mungkin sudah ditangani.

type Weekday = "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun";

function describe(day: Weekday): string {
    switch (day) {
        case "sat":
        case "sun":
            return "weekend";
        case "fri":
            return "almost weekend";
        default:
            return "workday";
    }
}

console.log(describe("sun")); // weekend
console.log(describe("fri")); // almost weekend
console.log(describe("tue")); // workday

Label yang ditumpuk (case "sat": case "sun":) berbagi satu cabang. return mengakhiri fungsi, jadi tidak perlu break setelahnya.

Sintaks

switch (expression) {
    case value1:
        // runs when expression === value1
        break;
    case value2:
    case value3:
        // runs for value2 or value3
        break;
    default:
        // runs when nothing else matched
}

• Pencocokan memakai kesamaan ketat, ===: case 1 tidak cocok dengan string "1".
• Tanpa break, return atau throw, eksekusi berlanjut ke case berikutnya (fallthrough).
• default bersifat opsional dan boleh ditaruh di mana saja, walaupun lazimnya di akhir.
• Nilai case yang bisa dibuktikan TypeScript tidak pernah cocok adalah error TS2678. Untuk parameter bertipe "a" | "b", case "c": melaporkan Type '"c"' is not comparable to type '"a" | "b"'., sehingga salah ketik di label case ketahuan.

Narrowing di Dalam Setiap Case

Di setiap case, TypeScript tahu nilai mana yang cocok dan mempersempit tipenya. Ini paling berguna dengan discriminated union: lakukan switch pada property tag yang sama-sama dimiliki, dan setiap case melihat varian yang cocok beserta property miliknya sendiri.

type Shape =
    | { kind: "circle"; radius: number }
    | { kind: "rect"; width: number; height: number }
    | { kind: "square"; side: number };

function area(shape: Shape): number {
    switch (shape.kind) {
        case "circle":
            return Math.PI * shape.radius ** 2; // shape: circle variant
        case "rect":
            return shape.width * shape.height;  // shape: rect variant
        case "square":
            return shape.side ** 2;             // shape: square variant
    }
}

console.log(area({ kind: "circle", radius: 1 }).toFixed(2)); // 3.14
console.log(area({ kind: "rect", width: 2, height: 3 }));    // 6
console.log(area({ kind: "square", side: 4 }));              // 16

shape.radius hanya lolos kompilasi di case "circle". Di luar case itu, shape bisa saja persegi panjang, yang tidak punya radius. Tidak ada default, dan fungsinya tetap lolos pengecekan tipe sebagai fungsi yang mengembalikan number, karena TypeScript melihat bahwa ketiga case sudah mencakup setiap kind. Pola lain yang dibangun di atas ini ada di halaman discriminated unions.

Exhaustive Switch dengan never

Fungsi di atas berhenti lolos kompilasi kalau bentuk keempat ditambahkan tanpa case (TS2366, return yang hilang). Itu hanya berhasil kalau fungsinya mengembalikan nilai. Untuk jaminan yang juga berlaku di kode void dan memberi pesan yang lebih jelas, tambahkan default yang meng-assign nilainya ke never:

// This does not compile: the "triangle" case is missing.
type Shape =
    | { kind: "circle"; radius: number }
    | { kind: "square"; side: number }
    | { kind: "triangle"; base: number; height: number };

function area(shape: Shape): number {
    switch (shape.kind) {
        case "circle":
            return Math.PI * shape.radius ** 2;
        case "square":
            return shape.side ** 2;
        default: {
            const unreachable: never = shape;
            throw new Error(`Unknown shape: ${JSON.stringify(unreachable)}`);
        }
    }
}

console.log(area({ kind: "square", side: 3 }));

index.ts(14,19): error TS2322: Type '{ kind: "triangle"; base: number; height: number; }' is not assignable to type 'never'.

Setelah case-case yang ditangani, satu-satunya tipe yang tersisa untuk shape adalah varian segitiga, dan varian itu tidak bisa di-assign ke never. Error-nya menyebut persis apa yang terlewat. Tambahkan case "triangle": return (shape.base * shape.height) / 2; dan default melihat never, sehingga bloknya lolos kompilasi dan mencetak 9. throw tetap menjaga dari data yang buruk saat runtime, seperti kind dari JSON yang tidak diantisipasi oleh tipenya.

Banyak codebase membungkus pengecekan ini dalam sebuah helper:

function assertNever(value: never): never {
    throw new Error(`Unhandled value: ${JSON.stringify(value)}`);
}

type Status = "idle" | "loading" | "done";

function label(status: Status): string {
    switch (status) {
        case "idle": return "Waiting";
        case "loading": return "Loading...";
        case "done": return "Finished";
        default: return assertNever(status);
    }
}

console.log(label("loading")); // Loading...

Teknik yang sama berlaku untuk enum: lakukan switch pada nilai enum dan kirim nilainya ke assertNever di default.

switch (true) untuk Rentang dan Kondisi

switch membandingkan nilai, jadi rentang butuh trik: lakukan switch pada true dan tulis kondisi di setiap case. Sejak TypeScript 5.3, kondisi-kondisi itu mempersempit tipe seperti pernyataan if.

function grade(score: number): string {
    switch (true) {
        case score >= 90: return "A";
        case score >= 80: return "B";
        case score >= 70: return "C";
        default: return "F";
    }
}

function format(value: string | number | boolean): string {
    switch (true) {
        case typeof value === "string":
            return value.toUpperCase();   // value: string
        case typeof value === "number":
            return value.toFixed(2);      // value: number
        default:
            return value ? "yes" : "no";  // value: boolean
    }
}

console.log(grade(85), grade(42));                     // B F
console.log(format("hi"), format(3.14159), format(true)); // HI 3.14 yes

Case diuji secara berurutan, jadi taruh yang paling spesifik lebih dulu. Apakah cara ini lebih enak dibaca daripada if / else if adalah soal selera; perilakunya sama.

Fallthrough dan break

Case yang punya kode tetapi tanpa break, return atau throw akan berlanjut ke case berikutnya. Itu hampir selalu bug. Opsi compiler noFallthroughCasesInSwitch (bukan bagian dari strict) mengubahnya menjadi error TS7029, Fallthrough case in switch., sambil tetap mengizinkan label kosong yang ditumpuk.

function permissions(role: "admin" | "editor" | "viewer"): string[] {
    const result: string[] = [];
    switch (role) {
        case "admin":
            result.push("delete");
        // intentional fallthrough: admins can also edit
        case "editor":
            result.push("edit");
        // intentional fallthrough: editors can also view
        case "viewer":
            result.push("view");
    }
    return result;
}

console.log(permissions("admin"));  // [ 'delete', 'edit', 'view' ]
console.log(permissions("viewer")); // [ 'view' ]

Fallthrough yang disengaja seperti ini memang berfungsi, tetapi kalau noFallthroughCasesInSwitch aktif, kodenya harus ditulis ulang, misalnya dengan pengecekan if yang terpisah. Biasanya cara itu memang lebih jelas.

Variabel di Dalam Case

Seluruh isi switch adalah satu blok, jadi const yang dideklarasikan di satu case terlihat di case lain (dan mendeklarasikannya ulang adalah error). Bungkus sebuah case dengan kurung kurawal supaya ia punya scope sendiri:

function price(item: "tea" | "cake", qty: number): number {
    switch (item) {
        case "tea": {
            const unit = 2.5;
            return unit * qty;
        }
        case "cake": {
            const unit = 4; // fine: a different block
            return unit * qty;
        }
    }
}

console.log(price("tea", 2), price("cake", 3)); // 5 12

Tanpa kurung kurawal, const unit yang kedua adalah error kompilasi TS2451, Cannot redeclare block-scoped variable 'unit'.

switch vs Lookup Object

Kalau setiap case hanya memetakan satu nilai ke nilai lain, object bertipe Record lebih ringkas, dan TypeScript mengecek bahwa setiap key ada:

type Level = "debug" | "info" | "warn" | "error";

const icons: Record<Level, string> = {
    debug: "[D]",
    info: "[I]",
    warn: "[W]",
    error: "[E]",
};

console.log(icons.warn, icons["error"]); // [W] [E]

Melewatkan sebuah key adalah error kompilasi, yang memberi kelengkapan yang sama seperti pengecekan never. Pakai switch untuk case yang menjalankan logika berbeda, mempersempit varian union, atau melakukan return lebih awal.