TypeScript switch case: צמצום ובדיקות מיצוי

משפט switch ב-TypeScript הוא ה-switch של JavaScript עם בדיקת טיפוסים. הוא משווה ערך לכל case עם ===, מריץ את הענף שמתאים, ועוצר ב-break או ב-return. TypeScript מצמצם את הערך בתוך כל case ויכול לבדוק שכל ערך אפשרי מטופל.

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

תוויות מוערמות (case "sat": case "sun":) חולקות ענף אחד. return מסיים את הפונקציה, ולכן אין צורך ב-break אחריו.

תחביר

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
}

• ההתאמה משתמשת בשוויון מחמיר, ===: case 1 לא מתאים למחרוזת "1".
• בלי break, return או throw, הביצוע ממשיך ל-case הבא (fallthrough).
• default הוא אופציונלי ויכול לשבת בכל מקום, אם כי נהוג לשים אותו אחרון.
• ערך case ש-TypeScript יכול להוכיח שאף פעם לא יתאים הוא השגיאה TS2678. לפרמטר מטיפוס "a" | "b", case "c": מדווח Type '"c"' is not comparable to type '"a" | "b"'., וזה תופס שגיאות הקלדה בתוויות.

צמצום בתוך כל case

בכל case, TypeScript יודע איזה ערך התאים ומצמצם את הטיפוס. זה הכי שימושי עם discriminated union: עשו switch על מאפיין התגית המשותף, וכל case רואה את הווריאנט המתאים עם המאפיינים שלו.

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 מתקמפל רק ב-case של "circle". מחוץ לו, shape יכול להיות מלבן, שאין לו radius. אין default, והפונקציה עדיין עוברת בדיקת טיפוסים כמחזירה number, כי TypeScript רואה ששלושת ה-cases מכסים כל kind. תבניות נוספות שנבנות על זה נמצאות בעמוד discriminated unions.

switch ממצה עם never

הפונקציה למעלה מפסיקה להתקמפל אם מוסיפים צורה רביעית בלי case (TS2366, חסר return). זה עובד רק כשהפונקציה מחזירה ערך. לערובה שעובדת גם בקוד void ונותנת הודעה ברורה יותר, הוסיפו default שמשים את הערך ל-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'.

אחרי ה-cases שטופלו, הטיפוס היחיד שנשאר ל-shape הוא הווריאנט של המשולש, ואי אפשר להשים אותו ל-never. השגיאה מציינת בדיוק מה חסר. הוסיפו case "triangle": return (shape.base * shape.height) / 2; וה-default רואה never, כך שהבלוק מתקמפל ומדפיס 9. ה-throw עדיין מגן מפני נתונים שגויים בזמן ריצה, כמו kind שהגיע מ-JSON והטיפוסים לא צפו אותו.

בסיסי קוד רבים עוטפים את הבדיקה בפונקציית עזר:

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

אותה טכניקה עובדת עם enums: עשו switch על ערך ה-enum והעבירו אותו ל-assertNever ב-default.

switch (true) לטווחים ולתנאים

switch משווה ערכים, ולכן טווחים דורשים טריק: עשו switch על true וכתבו תנאי בכל case. מאז TypeScript 5.3, התנאים האלה מצמצמים טיפוסים בדיוק כמו משפטי 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

ה-cases נבדקים לפי הסדר, אז שימו את הספציפי ביותר ראשון. אם זה קריא יותר מ-if / else if זה עניין של טעם; ההתנהגות זהה.

fallthrough ו-break

case שיש בו קוד אבל אין בו break, return או throw נופל ל-case הבא. זה כמעט תמיד באג. אפשרות הקומפיילר noFallthroughCasesInSwitch (לא חלק מ-strict) הופכת את זה לשגיאה TS7029, Fallthrough case in switch., ועדיין מתירה תוויות ריקות מוערמות.

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 מכוון כזה עובד, אבל כש-noFallthroughCasesInSwitch מופעל צריך לכתוב אותו מחדש, למשל עם בדיקות if נפרדות. בדרך כלל זה גם ברור יותר.

משתנים בתוך cases

כל גוף ה-switch הוא בלוק אחד, ולכן const שהוצהר ב-case אחד נראה ב-cases האחרים (והצהרה חוזרת היא שגיאה). עטפו case בסוגריים מסולסלים כדי לתת לו scope משלו:

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

בלי הסוגריים, ה-const unit השני הוא שגיאת הקומפילציה TS2451, Cannot redeclare block-scoped variable 'unit'.

switch מול חיפוש באובייקט

כשכל case רק ממפה ערך לערך אחר, אובייקט עם טיפוס Record קצר יותר, ו-TypeScript בודק שכל מפתח קיים:

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]

השמטה של מפתח היא שגיאת קומפילציה, וזה נותן את אותו מיצוי כמו בדיקת never. השאירו את switch למקרים שמריצים לוגיקה שונה, מצמצמים וריאנטים של union או חוזרים מוקדם.