Switching on a template literal expression does not narrow the interpolated union variable

[nick-grain]

🔎 搜索 Terms

template literal, template expression, switch, narrowing, control flow analysis, interpolated variable, union, as const

🕗 Version & Regression Information

This is the behavior in every version tried (4.1.5, 5.9.2, 7.0.2; not expressible before 4.1), and I (had claude) review the FAQ for entries about type narrowing and template literal types

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=5.9.2#code/CYUwxgNghgTiAEYD2A7AzgF3gMyUgXPAERQAOpEIR8APsaSLNXUQEZQodREDcAUHzQB3AJYYwAC3gAKAAYASAN64kAX3ikRIWfChpEqTAEp4ivvAuI9CEuUoatRfOcuvk6LGQohCt79QBeHDx+V1cAenD4AD0AfngQAA8GMAwQYGCkeAwszhgYJCFsrL9KXl1UgFcoCAgAT3hgJBB9FCQsPIKhFwtWOCgAa35VAUiDFAwCiEJhMUkRFABzeFRMxpE4VPr4TsL9PQTk8DTgQVFxKWkVEzM3a2IvMucwy3dMXTsfB8-AzNDLPqMIZ8EZAA

💻 Code

declare const foo: "apple" | "pear" | "banana";

switch (`${foo} pie` as const) {
    case "apple pie":
        const apple: "apple" = foo;
        // ^? expected foo to narrow to "apple"; actually does not narrow
    break;
}

// control: switching on foo directly narrows as expected
switch (foo) {
    case "apple":
        const apple: "apple" = foo;
    break;
}

🙁 Actual behavior

Inside case "apple pie":, foo is still typed "apple" | "pear" | "banana", so const apple: "apple" = foo fails with:

error TS2322: Type '"apple" | "pear" | "banana"' is not assignable to type '"apple"'.

This is wrong because the case can only be reached when foo === "apple". The switch subject ${foo} pie as const is typed as "apple pie" | "pear pie" | "banana pie", and each case label corresponds to exactly one value of foo. The compiler already computes that correspondence, but control flow analysis doesn't propagate the match back to foo. The equivalent if ((${foo} pie as const) === "apple pie") fails the same way, while switching on foo directly narrows as expected.

🙂 Expected behavior

foo should narrow to "apple" inside case "apple pie", and correspondingly in the other cases.

Since foo's type is a finite union of string literals, ${foo} pie evaluates to a distinct literal for each member. The mapping from case label back to foo's value is unambiguous and already known to the checker, which is what makes the subject type "apple pie" | "pear pie" | "banana pie" in the first place.

Matching a case label should therefore narrow foo the same way switch (foo) does, analogous to how narrowing already works backwards through other expression forms like typeof foo === "string" and switch (true) (TS 5.3)

Additional information about the issue

I understand this may be a design limitation rather than a bug, since narrowing generally only tracks references and the switch subject here is an expression. But the checker already computes the exact one-to-one mapping from foo's members to the subject's members when it constructs the type "apple pie" | "pear pie" | "banana pie", so the information needed to narrow is present.

Related but distinct issues found while searching: #46045, #53887, #42007, #20949, #51426 (none cover narrowing the interpolated variable of a template literal expression used as a switch/equality subject).

This issue was drafted using the assistance of LLMs (claude), though everything was read, directed, and reviewed by me before submitting this issue through the github website.

[RyanCavanaugh]

Why would you write this code this way?

[nick-grain]

while that code is contrived, it is a minimum reproducible example of this more useful code that I was trying to write:

type Box = {
    type: "box",
    x: number,
    y: number, 
    width: number, 
    height: number
};
type Circle = {
    type: "circle",
    radius: number,
    x: number, 
    y: number
};

type Shape = Box | Circle;

function collide(a: Shape, b: Shape): boolean {
    switch(`${a.type}-${b.type}` as const) {
        case "circle-circle":
            // can be used to narrow both shapes to a circle 
            return collideCircleCircle(a, b);
        case "circle-box":
            return collideCircleBox(a, b);
        case "box-circle":
            return collideCircleBox(b, a);
    }
    return false;
}

function collideCircleCircle(circleA: Circle, circleB: Circle): boolean { /* ... */ return false; }

function collideCircleBox(circle: Circle, box: Box): boolean { /* ... */ return false }