在 Angular 17 中，如果我尝试将变量与“未定义”进行比较，则编译时会自动将“未定义”替换为“null”

Question

我使用了 Bootstrap DatePicker，它在清空时返回未定义的事件。当在我的 TS 文件中时：我尝试比较事件是否未定义，它永远不会进入该 if 块。因为在我的浏览器中，当我检查编译后的代码时，它已将 undefined 替换为 null。

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>

TS 文件：

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

编译后JS文件（可以在浏览器中查看，打开Inspect Element）：

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

这里如果我调试这个，事件结果是未定义的，但它不能进入任何一个 if 块。

Answer 1

这里的问题是 Angular 和 TypeScript 如何处理

undefined

和

null

之间的比较。当 TS 编译为 JS 时，它可以以我们不期望/不一定想要的方式优化某些比较。

要解决这个问题，最简单的方法就是让您的检查更加稳健。

例如：

serviceDueDateFocusOut(event: any) {
    if (typeof event === 'undefined') {
      // Do something
    } else if (event === null) {
      // Do Another Thing
    } else {
      // Do Another Thing 2
    }
}

这是我设置的 stackblitz，它展示了这一点。

将变量

buttonValue

 更改为 null 或未定义，然后运行 stackblitz 并单击按钮。它将输出正确的值。

您会注意到，如果您使用我更详细的检查，它将显示正确的值。如果你使用你的支票，无论你使用什么变量，返回都将为空。

希望这有帮助！