angular - 类型脚本属性 'options' 在联合类型的类型上不存在

Question

我有几个接口(interface)和一个联合类型:

export interface FieldOptions {
  value: string | number;
  viewValue: string;
}

export interface BaseField {
  id: string;
  derived?: boolean;
  required?: boolean;
}

export interface NumberField extends BaseField {
  type: 'number';
  decimals: number;
}
export interface SelectField extends BaseField {
  type: 'select' | 'select-multi';
  options: FieldOptions[];
  source?: string;
}

export type Field = NumberField | SelectField;

据我了解，当我使用我的联合类型字段时，它主宰一个字段可以是 Number 或 Select。

有了这些知识，我的 Angular 组件中就有了一个函数

getField( key: string ): Field {
  return this.fields.filter( el => el.id === key )[ 0 ];
}

getFieldVersion2( key: string ): any {
  const field = this.fields.filter( el => el.id === key )[ 0 ];
  if ( (<SelectField>field).options ) {
    return field as SelectField;
  } else {
    return field as Field;
  }
}

只有在我的模板中调用函数 getField 来获取 Field 对象，在本例中是带有 View / View 值的选项数组的 Select，我在 TS 上遇到构建错误:

Property 'options' does not exist on type 'Field'.
   Property 'options' does not exist on type 'NumberField'.

在我的理解中，Field 是 Number 或 Select 的联合类型。其中一个具有 options 属性，另一个没有。

所以我创建了 getFieldVersion2 来希望能解决这个问题。但是，除非我将 any 添加为函数的结果类型，否则它将触发构建错误。

正在使用触发编译错误的选项的模板:

<mat-form-field  class="input">
  <mat-select formControlName="state">
    <mat-option *ngFor="let option of getField( 'state' ).options" [value]="option.value">
       {{option.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

这是怎么回事，我应该怎么做才能更好？

Answer 1

您创建了一个没有“选项”属性的接口(interface)。然后，您将“字段”类型设置为等于该接口(interface)(或可能等于另一个具有“选项”属性的接口(interface))。

然后您将尝试调用可能存在或可能不存在的“选项”属性。这就是您在编译时收到 ts 错误的原因。

将返回类型切换为“any”是可行的，因为编译器不会尝试猜测您返回的对象类型(因此“options”可能是一个有效属性，因此不应抛出任何错误)。

如果您要调用“Field”类型的“options”属性，您应该在尝试编译 ts 脚本之前确保它存在。

也许将您的方法更新为“getSelectField”和“getNumberField”会是一个更好的选择……但当然有多种方法可以处理此问题。