fix(compiler): Keep paraenthesis in Nullish + Boolean expression. (#63292)

JeanMeche · crisbeto · commit a28672fb7017 · 2025-08-21T12:15:52.000+02:00
Ts 5.9 introduced a regression coming from 5.8 when parenthesis aren't generated for expressions like (`(a ?? b) && c`). This fix works around this explicitly specifying that we want to keep those parenthesis that we're aware of in this specific case; This change can be reverted if the root issue (microsoft/TypeScript#61369) is fixed. (but let's keep the tests in any case for the coverage) fixes #63287 PR Close #63292
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/nullish_coalescing/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/nullish_coalescing/GOLDEN_PARTIAL.js
@@ -182,6 +182,10 @@ MyApp.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-
     <div>{{ (x && y) ?? z }}</div>
     <div>{{ x && (y ?? z) }}</div>
     <div>{{ x?.y ?? y?.z }}</div>
+    <div>{{ (x?.y ?? y) || z }}</div>
+    <div>{{ (x?.y ?? y) && z }}</div>
+    <div>{{ z || (x?.y ?? y) }}</div>
+    <div>{{ z && (x?.y ?? y) }}</div>
     `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyApp, decorators: [{
             type: Component,
@@ -191,6 +195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
     <div>{{ (x && y) ?? z }}</div>
     <div>{{ x && (y ?? z) }}</div>
     <div>{{ x?.y ?? y?.z }}</div>
+    <div>{{ (x?.y ?? y) || z }}</div>
+    <div>{{ (x?.y ?? y) && z }}</div>
+    <div>{{ z || (x?.y ?? y) }}</div>
+    <div>{{ z && (x?.y ?? y) }}</div>
     `,
                 }]
         }] });
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/nullish_coalescing/nullish_coalescing_parens.ts b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/nullish_coalescing/nullish_coalescing_parens.ts
@@ -6,6 +6,10 @@ import {Component} from '@angular/core';
     <div>{{ (x && y) ?? z }}</div>
     <div>{{ x && (y ?? z) }}</div>
     <div>{{ x?.y ?? y?.z }}</div>
+    <div>{{ (x?.y ?? y) || z }}</div>
+    <div>{{ (x?.y ?? y) && z }}</div>
+    <div>{{ z || (x?.y ?? y) }}</div>
+    <div>{{ z && (x?.y ?? y) }}</div>
     `,
 })
 export class MyApp {
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/nullish_coalescing/nullish_coalescing_parens_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/nullish_coalescing/nullish_coalescing_parens_template.js
@@ -5,4 +5,12 @@ if (rf & 2) {
   $i0$.ɵɵtextInterpolate(ctx.x && (ctx.y ?? ctx.z));
   $i0$.ɵɵadvance(2);
   $i0$.ɵɵtextInterpolate((ctx.x == null ? null : ctx.x.y) ?? (ctx.y == null ? null : ctx.y.z));
+  $i0$.ɵɵadvance(2);
+  $i0$.ɵɵtextInterpolate(((ctx.x == null ? null : ctx.x.y) ?? ctx.y) || ctx.z);
+  $i0$.ɵɵadvance(2);
+  $i0$.ɵɵtextInterpolate(((ctx.x == null ? null : ctx.x.y) ?? ctx.y) && ctx.z);
+  $i0$.ɵɵadvance(2);
+  $i0$.ɵɵtextInterpolate(ctx.z || ((ctx.x == null ? null : ctx.x.y) ?? ctx.y));
+  $i0$.ɵɵadvance(2);
+  $i0$.ɵɵtextInterpolate(ctx.z && ((ctx.x == null ? null : ctx.x.y) ?? ctx.y));
 }
diff --git a/packages/compiler/src/template/pipeline/src/phases/strip_nonrequired_parentheses.ts b/packages/compiler/src/template/pipeline/src/phases/strip_nonrequired_parentheses.ts
@@ -18,8 +18,13 @@ import type {CompilationJob} from '../compilation';
  *
  * 1. Unary operators in the base of an exponentiation expression. For example, `-2 ** 3` is not
  *    valid JavaScript, but `(-2) ** 3` is.
+ *
  * 2. When mixing nullish coalescing (`??`) and logical and/or operators (`&&`, `||`), we need
  *    parentheses. For example, `a ?? b && c` is not valid JavaScript, but `a ?? (b && c)` is.
+ *    Note: Because of the outcome of https://github.com/microsoft/TypeScript/issues/62307
+ *    We need (for now) to keep parentheses around the `??` operator when it is used with and/or operators.
+ *    For example, `a ?? b && c` is not valid JavaScript, but `(a ?? b) && c` is.
+ *
  * 3. Ternary expression used as an operand for nullish coalescing. Typescript generates incorrect
  *    code if the parentheses are missing. For example when `(a ? b : c) ?? d` is translated to
  *    typescript AST, the parentheses node is removed, and then the remaining AST is printed, it
@@ -42,6 +47,11 @@ export function stripNonrequiredParentheses(job: CompilationJob): void {
             case o.BinaryOperator.NullishCoalesce:
               checkNullishCoalescingParens(expr, requiredParens);
               break;
+            // these 2 cases can be dropped if the regression introduced in 5.9.2 is fixed
+            // see https://github.com/microsoft/TypeScript/issues/62307
+            case o.BinaryOperator.And:
+            case o.BinaryOperator.Or:
+              checkAndOrParens(expr, requiredParens);
           }
         }
       });
@@ -92,6 +102,16 @@ function checkNullishCoalescingParens(
   }
 }
 
+function checkAndOrParens(expr: o.BinaryOperatorExpr, requiredParens: Set<o.ParenthesizedExpr>) {
+  if (
+    expr.lhs instanceof o.ParenthesizedExpr &&
+    expr.lhs.expr instanceof o.BinaryOperatorExpr &&
+    expr.lhs.expr.operator === o.BinaryOperator.NullishCoalesce
+  ) {
+    requiredParens.add(expr.lhs);
+  }
+}
+
 function isLogicalAndOr(expr: o.Expression) {
   return (
     expr instanceof o.BinaryOperatorExpr &&
