联合类型的类型上不存在 typescript 属性“选项”

Question

我有几个接口和一个联合类型：

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;

据我了解，当我使用联合类型字段时，它的主要字段可以是数字或选择。

有了这些知识，我的 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 来获取字段对象，在本例中为带有视图/视图值的选项数组的选择，我在 TS 上收到构建错误：

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

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

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

使用options的模板触发编译错误：

<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

您创建的界面没有“选项”属性。然后将“字段”类型设置为等于该接口（或可能等于另一个具有“选项”属性的接口）。

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

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

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

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