Switch case trong TypeScript: thu hẹp kiểu và kiểm tra đủ

Câu lệnh switch trong TypeScript là switch của JavaScript có thêm kiểm tra kiểu. Nó so sánh một giá trị với từng case bằng ===, chạy nhánh khớp, và dừng ở break hoặc return. TypeScript thu hẹp kiểu của giá trị đang xét bên trong mỗi case và có thể kiểm tra rằng mọi giá trị có thể xảy ra đều đã được xử lý.

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

Các nhãn xếp chồng (case "sat": case "sun":) dùng chung một nhánh. return kết thúc hàm, nên không cần break sau nó.

Cú pháp

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
}

• Việc so khớp dùng phép so sánh bằng nghiêm ngặt, ===: case 1 không khớp với chuỗi "1".
• Không có break, return hoặc throw, chương trình sẽ chạy tiếp vào case kế tiếp (fallthrough).
• default là tùy chọn và có thể đặt ở bất cứ đâu, dù theo thông lệ nó đứng cuối.
• Một giá trị case mà TypeScript chứng minh được là không bao giờ khớp sẽ gây lỗi TS2678. Với một tham số có kiểu "a" | "b", case "c": báo Type '"c"' is not comparable to type '"a" | "b"'., nhờ vậy bắt được lỗi gõ sai trong nhãn case.

Thu hẹp kiểu trong từng case

Trong mỗi case, TypeScript biết giá trị nào đã khớp và thu hẹp kiểu tương ứng. Điều này hữu ích nhất với discriminated union: switch trên thuộc tính nhãn dùng chung, và mỗi case thấy đúng biến thể khớp cùng các thuộc tính riêng của nó.

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 chỉ biên dịch được trong case "circle". Ra ngoài case đó, shape có thể là một hình chữ nhật, vốn không có radius. Không có default, nhưng hàm vẫn qua được bước kiểm tra kiểu với kiểu trả về number, vì TypeScript thấy ba case đã bao quát mọi kind. Các mẫu khác dựa trên kỹ thuật này có ở trang discriminated unions.

Switch kiểm tra đủ với never

Hàm ở trên sẽ không biên dịch được nữa nếu thêm một hình thứ tư mà không có case cho nó (TS2366, thiếu lệnh return). Cách đó chỉ hiệu quả khi hàm trả về một giá trị. Để có một bảo đảm dùng được cả trong code void và cho thông báo rõ ràng hơn, hãy thêm một default gán giá trị cho 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'.

Sau các case đã xử lý, kiểu duy nhất còn lại của shape là biến thể tam giác, và nó không gán được cho never. Thông báo lỗi chỉ ra chính xác thứ còn thiếu. Thêm case "triangle": return (shape.base * shape.height) / 2; thì default sẽ thấy never, nên khối code biên dịch được và in ra 9. Lệnh throw vẫn bảo vệ trước dữ liệu xấu lúc chạy, như một kind lấy từ JSON mà các kiểu không lường trước.

Nhiều codebase đóng gói phép kiểm tra này trong một hàm hỗ trợ:

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...

Kỹ thuật này cũng dùng được với enum: switch trên giá trị enum và truyền nó vào assertNever trong default.

switch (true) cho khoảng giá trị và điều kiện

switch so sánh các giá trị, nên với khoảng giá trị bạn cần một mẹo: switch trên true và viết một điều kiện trong mỗi case. Từ TypeScript 5.3, các điều kiện đó thu hẹp kiểu giống hệt câu lệnh 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

Các case được kiểm tra theo thứ tự, nên hãy đặt case cụ thể nhất lên đầu. Cách này có dễ đọc hơn if / else if hay không là chuyện sở thích; hành vi thì như nhau.

Fallthrough và break

Một case có code nhưng không có break, return hoặc throw sẽ rơi xuống case kế tiếp. Gần như lúc nào đó cũng là bug. Tùy chọn trình biên dịch noFallthroughCasesInSwitch (không thuộc strict) biến nó thành lỗi TS7029, Fallthrough case in switch., nhưng vẫn cho phép các nhãn rỗng xếp chồng.

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 có chủ đích như thế này vẫn chạy, nhưng khi bật noFallthroughCasesInSwitch thì phải viết lại, ví dụ bằng các câu lệnh if riêng biệt. Dù sao cách đó thường cũng rõ ràng hơn.

Biến bên trong case

Toàn bộ thân switch là một khối lệnh, nên một const khai báo trong một case sẽ nhìn thấy được ở các case khác (và khai báo lại là lỗi). Bọc một case trong cặp ngoặc nhọn để nó có phạm vi riêng:

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

Không có cặp ngoặc nhọn, const unit thứ hai là lỗi biên dịch TS2451, Cannot redeclare block-scoped variable 'unit'.

switch hay tra cứu bằng đối tượng

Khi mỗi case chỉ ánh xạ một giá trị sang một giá trị khác, một đối tượng có kiểu Record sẽ ngắn gọn hơn, và TypeScript kiểm tra rằng mọi khóa đều có mặt:

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]

Bỏ sót một khóa là lỗi biên dịch, cho bạn mức kiểm tra đủ giống như phép kiểm tra never. Hãy giữ switch cho những trường hợp chạy logic khác nhau, thu hẹp các biến thể của union, hoặc trả về sớm.