Angular 17中undefined编译为null导致Bootstrap日期选择器判断失效

问题场景 #

使用Bootstrap DatePicker组件时，清空日期会返回undefined事件。但在Angular 17的TypeScript代码中，判断event == undefined的分支永远无法进入；查看浏览器编译后的JS代码，发现原TS里的undefined被替换成了null，调试时确认event实际为undefined，但两个判断分支无法按预期执行。

相关代码 #

HTML模板

<div class="form-group col-md-4 col-xs-4 col-xl-3">
    <label for="serviceDueDate">{{
      commonService.labelConstants.SERVICE_DUE_DATE
      }}</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend" (click)="serviceDueDate.toggle()"
        [attr.aria-expanded]="serviceDueDate.isOpen">
        <div class="input-group-text outline">
          <i class="fa fa-calendar" id="from-calendar-btn"></i>
        </div>
      </div>
      <input id="serviceDueDate" appAutocompleteOff type="text" placeholder="DD/MM/YYYY"
        class="form-control form-control-sm" maxlength="10" [minDate]="minDate" [maxDate]="maxDate" bsDatepicker
        (bsValueChange)="serviceDueDateFocusOut($event)"
        [bsConfig]="bsConfig" formControlName="serviceDueDate" #serviceDueDate="bsDatepicker" />
    </div>
</div>

原始TypeScript代码

serviceDueDateFocusOut(event) {
    if(event == undefined) {
      // Do something
    } else if(event == null) {
      // Do Another Thing
    }
}

编译后的JavaScript代码

serviceDueDateFocusOut(event) {
    if(event == null) {
      // Do something
    } else if(event == null) {
      // Do Another Thing
    }
}

原因解析 #

Angular使用的TypeScript编译器会对松散相等判断做优化：当检测到x == undefined时，会自动将其替换为x == null——因为在JavaScript中undefined == null的结果为true，编译器认为这是等价写法。但这导致原TS中两个互斥的分支，编译后变成完全相同的条件，第二个分支永远无法触发；而实际event为undefined时，虽然会进入第一个分支，但这和原本想区分undefined与null的逻辑不符。

解决方案 #

方案1：使用严格相等判断（区分undefined和null） #

改用===严格相等运算符，TypeScript编译器不会对这种判断做替换，能准确区分undefined和null：

serviceDueDateFocusOut(event) {
    if(event === undefined) {
      // 处理清空日期返回undefined的情况
    } else if(event === null) {
      // 处理null的情况
    }
}

方案2：合并判断（无需区分undefined和null） #

如果不需要区分undefined和null，直接合并成一个判断分支，符合编译器优化逻辑，代码更简洁：

serviceDueDateFocusOut(event) {
    if(event == null) {
      // 统一处理undefined或null的情况
    }
}

内容的提问来源于stack exchange，提问作者Pulkit Goyal