Angular中联合类型表单字段HTML报错的解决方案

第一步：修正类型定义的错误 #

你当前的DropdownFormField泛型第一个参数误用了TemplateStringsArray，应该和InputFormField保持一致为T，否则联合类型的泛型约束会混乱：

export type FormField<T, TDropDown = any> =
  | InputFormField<T>
  | DropdownFormField<T, TDropDown>; // 替换原TemplateStringsArray为T

export interface InputFormField<T> {
  key: Extract<keyof T, string>;
  type: 'string' | 'date' | 'number';
}

export interface DropdownFormField<T, TDropDown> {
  type: 'dropdown';
  key: Extract<keyof T, string>;
  dropdownItems: Observable<TDropDown[]>;
  dropdownItemTitleKey: keyof TDropDown;
  dropdownItemValueKey: keyof TDropDown;
}

第二步：解决模板类型收窄问题 #

Angular模板的类型推断能力有限，即使使用*ngSwitchCase，TypeScript也无法自动将item收窄为DropdownFormField类型。有两种常用解决方案：

方案1：快速临时解决——使用$any()断言 #

直接在模板中用$any()绕过类型检查，适合快速调试：

<div *ngFor="let item of formFields" nz-col nzXs="24" nzMd="12" nzLg="8">
  <nz-form-item>
    <nz-form-label>
       {{ item.key }}
    </nz-form-label>
    <nz-form-control>
      <ng-container [ngSwitch]="item.type">
        <nz-select
          *ngSwitchCase="'dropdown'"
          [formControlName]="item.key"
          nzShowSearch
        >
          <nz-option
            *ngFor="let option of $any(item).dropdownItems | async"
            [nzLabel]="option[$any(item).dropdownItemTitleKey]"
            [nzValue]="option[$any(item).dropdownItemValueKey]"
          ></nz-option>
        </nz-select>
      </ng-container>
    </nz-form-control>
  </nz-form-item>
</div>

方案2：类型安全方案——组件类添加类型守卫函数 #

在组件类中定义类型守卫函数，帮助TypeScript在模板中正确推断类型：

// 组件类代码
isDropdownField<T, TDropDown>(item: FormField<T, TDropDown>): item is DropdownFormField<T, TDropDown> {
  return item.type === 'dropdown';
}

然后在模板中结合*ngIf使用这个函数，实现类型收窄：

<div *ngFor="let item of formFields" nz-col nzXs="24" nzMd="12" nzLg="8">
  <nz-form-item>
    <nz-form-label>
       {{ item.key }}
    </nz-form-label>
    <nz-form-control>
      <ng-container [ngSwitch]="item.type">
        <ng-container *ngSwitchCase="'dropdown'">
          <!-- 通过类型守卫函数明确item类型 -->
          <nz-select
            *ngIf="isDropdownField(item)"
            [formControlName]="item.key"
            nzShowSearch
          >
            <nz-option
              *ngFor="let option of item.dropdownItems | async"
              [nzLabel]="option[item.dropdownItemTitleKey]"
              [nzValue]="option[item.dropdownItemValueKey]"
            ></nz-option>
          </nz-select>
        </ng-container>
      </ng-container>
    </nz-form-control>
  </nz-form-item>
</div>

补充说明 #

Angular模板无法像TypeScript代码那样自动识别基于type属性的联合类型收窄，这是因为模板的类型检查器（Template Type Checker）的推断能力相对有限。通过类型守卫或$any()断言，可以解决这个类型不匹配的报错。

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