为运行时 Javascript 属性解析 Typescript 编译器消息

Question

我有一段代码如下：

<div class="authentication-validation-message-container">
  <ng-container *ngIf="email.invalid && (email.dirty || email.touched)">
    <div class="validation-error-message" *ngIf="email.errors.required">Email is required.</div>
    <div class="validation-error-message" *ngIf="email.errors.email">Email is not in the valid format. Please use a valid
      email.
    </div>
  </ng-container>
  <ng-container *ngIf="pwd.invalid && (pwd.dirty || pwd.touched)">
    <div class="validation-error-message" *ngIf="pwd.errors.required">Password is required.</div>
  </ng-container>
  <div class="validation-error-message" *ngIf="!verdict">{{errorMessage}}</div>
</div>

如果您使用的是 Angular，您可以使用 email.errors.required 之类的代码检查输入中是否包含无效数据。但是，.required、.email 等都是在 JS 的运行时执行期间出现的，因此在 TypeScript 的编译时是不知道的。

当我查看 IDE（使用 Jetbrains Rider，顺便说一句）时，我看到了这些编译时警告，我想以 TypeScript 惯用的方式解决它们：

我已经尝试过(email.errors as any).required，但警告不会消失。我相信as 现在是推荐的投射方式，而不是(<any> email.errors).required。好吧，无论如何，他们都没有工作。那么如果没有我去组件（Angular 概念）并修改它们，例如通过属性公开这些错误消息等，您的建议是什么？

编辑：

这些是警告信息：

Answer 1

实际问题是预期存在的类型。 ngIf 构造期望有一个带有 boolean 结果的表达式，但就实际状态而言，您的代码并不能确保该要求。要使警告消失，您应该使用 '?' 运算符安全导航或将表达式转换为 boolean 类型。

例如你可以这样做：

<div class="validation-error-message" *ngIf="email?.errors.required">Email is required.</div>
<div class="validation-error-message" *ngIf="email?.errors.email">Email is not in the valid format. Please use a valid